时代Java

纯 css 动画效果，改变 max-height，从none 到 100px的用法。

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

680

纯 css 动画效果，改变 max-height，从none 到 100px的用法。目前 max-height 属性在 Chrome 浏览器下不会改变。

实例源码：

源代码：

执行

执行中...

编辑/阅读全部代码

执行结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>时代Java与您共同学习(NowJava.com)</title> 
<style> 
#myDIV {
 width: 500px;
 background-color: lightblue;
 overflow: auto;
 border: 1px solid black;
 -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
 animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {max-height: 100px;}
}

/* Standard syntax */
@keyframes mymove {
 50% {max-height: 100px;}
}
</style>
</head>
<body>

逐步改变 max-height, 从 "none" 到 "100px":

<div id="myDIV">
 时代Java
 https://NowJava.com
 This DIV element does not have a pre-defined height.
 An animation will change the max-height, from "none" to "100px".
 The height of this DIV element will not exceed 100 pixels.
</div>

max-height 属性支持动画效果。
注意: 目前 max-height 属性在 Chrome 浏览器下不会改变 gradually（灰阶）, 在 Firefox 都无法起作用。
注意：Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。

</body>
</html>

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2020-04-27 16:57:222020-04-27 16:57:22

实例源码

实例源码订阅