纯 css 动画效果，改变 max-height，从none 到 100px的用法。
纯 css 动画效果，改变 max-height，从none 到 100px的用法。目前 max-height 属性在 Chrome 浏览器下不会改变。
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style> 7
#myDIV {8
width: 500px;9
background-color: lightblue;10
overflow: auto;11
border: 1px solid black;12
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */13
animation: mymove 5s infinite;14
}15
16
/* Chrome, Safari, Opera */17
@-webkit-keyframes mymove {18
50% {max-height: 100px;}19
}20
21
/* Standard syntax */22
@keyframes mymove {23
50% {max-height: 100px;}24
}25
</style>26
</head>27
<body>28
29
<p>逐步改变 max-height, 从 "none" 到 "100px":<p>30
31
<div id="myDIV">32
<p>时代Java</p>33
<p>https://NowJava.com</p>34
<p>This DIV element does not have a pre-defined height.</p>35
<p>An animation will change the max-height, from "none" to "100px".</p>36
<p>The height of this DIV element will not exceed 100 pixels.</p>37
</div>38
39
<p>max-height 属性支持动画效果。</p>40
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java