CSS 动画相关属性 经典实例 汇总
css3基础 2022-05-23 12:13:18小码哥的IT人生shichen
CSS 动画相关属性
定义和用法
一些 CSS 属性可用于动画制作，这意味着它们可用于过渡等效果中。
可设置动画的属性可以从一个值逐渐更改为另一个值，例如尺寸、数字、百分比和颜色。
浏览器支持
表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。
-webkit-、-moz- 或 -o- 后面的数字注明了使用前缀的第一个版本。
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
示例代码：
设置背景颜色从红色到蓝色的动画：
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of background-color</h1>
<p>逐渐将背景颜色从红色更改为蓝色：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
动画相关属性
下面的表格中列出了 CSS 中的动画相关属性：
完整实例1：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red url('smiley.gif') no-repeat top left/5px 5px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background: blue bottom right/50px 50px;}
}
</style>
</head>
<body>
<h1>background 的动画效果：</h1>
<p>逐渐更改背景属性：<p>
<div id="myDIV"></div>
<p>background属性是所有背景属性的简写属性。</p>
<p>在 CSS 总，background-color、background-position 以及 background-size 属性<em>支持动画制作</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-color: blue;}
}
</style>
</head>
<body>
<h1>background-color 的动画效果：</h1>
<p>Gradually change the background-color from red to blue, and back to red:<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url('smiley.gif');
background-position: top left;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-position: center;}
}
</style>
</head>
<body>
<h1>background-position 的动画效果：</h1>
<p>逐渐将背景位置从“左上方”更改为“中心”，然后再改回为“左上方”：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url('/i/logo/w3logo-1.png');
background-size: 20px 20px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-size: 125px 125px;}
}
</style>
</head>
<body>
<h1>background-size 的动画效果：</h1>
<p>逐渐将背景尺寸从“10px 10px”更改为“125px 125px”，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>border 的动画效果：</h1>
<p>逐渐更改 border 属性：<p>
<div id="myDIV"></div>
<p>border 属性是所有边框属性的简写属性。</p>
<p>请参阅单个边框属性，来查看哪个属性<em>支持动画制作</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>border-bottom 的动画效果：</h1>
<p>逐渐更改 border-bottom 属性：<p>
<div id="myDIV"></div>
<p>border-bottom 是所有 border-bottom 属性的简写属性。</p>
<p>请查看单个的 border-bottom 的属性，来了解哪些是<em>支持动画制作的</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-color: lightblue;}
}
</style>
</head>
<body>
<h1>border-bottom-color 的动画效果：</h1>
<p>逐渐将 border-bottom-color 属性从黑色更改为蓝色：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-left-radius: 150px;}
}
</style>
</head>
<body>
<h1>border-bottom-left-radius 的动画效果：</h1>
<p>逐渐将 border-bottom-left-radius 属性从 0 改为 150px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-right-radius: 150px;}
}
</style>
</head>
<body>
<h1>border-bottom-right-radius 的动画效果：</h1>
<p>逐渐将 border-bottom-right-radius 属性从 0 改为 150px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-width: 50px;}
}
</style>
</head>
<body>
<h1>border-bottom-width 的动画效果：</h1>
<p>逐渐将 border-bottom-width 属性从 1px 改为 50px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例11：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-color: lightblue;}
}
</style>
</head>
<body>
<h1>border-color 的动画效果：</h1>
<p>逐渐将border-color属性从珊瑚更改为淡蓝色，然后返回：<p>
<div id="myDIV"></div>
逐渐将 border-color 属性从珊瑚色更改为淡蓝色，然后再：
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例12：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>border-left 的动画效果：</h1>
<p>逐渐更改 border-left 属性：<p>
<div id="myDIV"></div>
<p>border-left 是所有 border-left 属性的简写属性。</p>
<p>请查看单个的 border-left 的属性，来了解哪些是<em>支持动画制作的</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例13：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left-color: lightblue;}
}
</style>
</head>
<body>
<h1>border-left-color 的动画效果：</h1>
<p>逐渐将 border-left-color 属性从珊瑚色更改为淡蓝色，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例14：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left-width: 15px;}
}
</style>
</head>
<body>
<h1>border-left-width 的动画效果：</h1>
<p>逐渐将 border-left-width 属性从 1px 更改为 15px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例15：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>border-right 的动画效果：</h1>
<p>逐渐更改 border-right 属性：<p>
<div id="myDIV"></div>
<p>border-right 是所有 border-right 属性的简写属性。</p>
<p>请查看单个的 border-right 的属性，来了解哪些是<em>支持动画制作的</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例16：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right-color: lightblue;}
}
</style>
</head>
<body>
<h1>border-right-color 的动画效果：</h1>
<p>逐渐将 border-right-color 属性从珊瑚色更改为浅蓝色，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例17：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right-width: 15px;}
}
</style>
</head>
<body>
<h1>border-right-width 的动画效果：</h1>
<p>逐渐将 border-right-width 属性从 1px 改为 15px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例18：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
#myTABLE {
border-spacing: 2px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-spacing: 20px;}
}
</style>
</head>
<body>
<h1>border-spacing 的动画效果：</h1>
<p>逐渐将 border-spacing 属性从 2px 更改为 20px，然后再改回：<p>
<table id="myTABLE">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Emil</td>
<td>9</td>
</tr>
<tr>
<td>Tobias</td>
<td>7</td>
</tr>
<tr>
<td>Linus</td>
<td>2</td>
</tr>
</table>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例19：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>border-top 的动画效果：</h1>
<p>逐渐更改border-top属性：<p>
<div id="myDIV"></div>
<p>border-top 是所有 border-top 属性的简写属性。</p>
<p>请查看单个的 border-top 的属性，来了解哪些是<em>支持动画制作的</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例20：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-color: lightblue;}
}
</style>
</head>
<body>
<h1>border-top-color 的动画效果：</h1>
<p>逐渐将 border-top-color 属性从黑色更改为蓝色，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例21：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-left-radius: 150px;}
}
</style>
</head>
<body>
<h1>border-top-left-radius 的动画效果：</h1>
<p>逐渐将 border-top-left-radius 属性从 1px 更改为 150px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例22：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-right-radius: 150px;}
}
</style>
</head>
<body>
<h1>border-top-right-radius 的动画效果：</h1>
<p>逐渐将 border-top-right-radius 属性从 1px 更改为 150px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例23：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-width: 15px;}
}
</style>
</head>
<body>
<h1>border-top-width 的动画效果：</h1>
<p>逐渐将 border-top-width 属性从 1px 更改为 15px，然后再改回：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例24：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
bottom: 0px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {bottom: 300px;}
}
</style>
</head>
<body>
<h1>bottom 的动画效果：</h1>
<p>逐渐将 bottom 属性从 0px 更改为 300px，然后再改回：<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例25：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;}
}
</style>
</head>
<body>
<h1>box-shadow 的动画效果：</h1>
<p>逐渐更改 box-shadow 属性：<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例26：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: green;
position: absolute;
animation: mymove 5s infinite;
clip: rect(0,100px,100px,0);
}
@keyframes mymove {
50% {clip: rect(0,50px,50px,0);}
}
</style>
</head>
<body>
<h1>clip 的动画效果：</h1>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例27：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 300px;
color: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {color: blue;}
}
</style>
</head>
<body>
<h1>color 的动画效果：</h1>
<p>逐渐将文本的颜色从红色更改为蓝色，然后再改回：<p>
<div id="myDIV">
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例28：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 500px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {column-count: 5;}
}
</style>
</head>
<body>
<h1>column-count 的动画效果：</h1>
<p>将列数从 1 改为 5，然后再改回：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>Edge 不支持 column-count 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例29：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {column-gap: 100px;}
}
</style>
</head>
<body>
<h1>column-gap 的动画效果：</h1>
<p>将列之间的间隔从正常更改为 100px，然后再恢复为正常：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>Edge 不支持 column-gap 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例30：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 1px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule: 50px outset blue;
}
}
</style>
</head>
<body>
<h1>column-rule 的动画效果：</h1>
<p>逐渐更改列间规则：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p>column-rule 属性是所有 column-rule 属性的简写属性。</p>
<p>在 CSS 中，column-rule-color 和 column-rule-width 属性<em>支持动画制作</em>。</p>
<p><b>注释：</b>Edge 不支持 column-rule 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例31：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 15px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule-color: blue;
}
}
</style>
</head>
<body>
<h1>column-rule-color 的动画效果：</h1>
<p>逐渐将列间规则的颜色从红色更改为蓝色，然后再改回为红色：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>Edge 不支持 column-rule-color 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例32：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 1px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule-width: 50px;
}
}
</style>
</head>
<body>
<h1>column-rule-width 的动画效果：</h1>
<p>逐渐将列间规则的宽度从 1px 更改为 50px，然后再改回 1px：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>Edge 不支持 column-rule-width 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例33：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-width: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-width: 100px;
}
}
</style>
</head>
<body>
<h1>column-width 的动画效果：</h1>
<p>逐渐将列的宽度从 300px 更改为 100px，然后再改回 300px：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>Edge 不支持 column-width 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例34：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
columns: 100px 5;
}
}
</style>
</head>
<body>
<h1>columns 的动画效果：</h1>
<p>逐渐更改 columns 属性：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p>columns 属性是用于设置 column-count 和 column-width 属性的简写属性。</p>
<p><b>注释：</b>Edge 不支持 column 属性上的动画。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例35：
<!DOCTYPE html>
<html>
<head>
<style>
img {
animation: mymove 7s infinite;
}
@keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
</style>
</head>
<body>
<h1>filter 的动画效果：</h1>
<p>逐渐将图像的颜色更改为黑白（100％ 灰度），然后恢复为原始颜色：<p>
<img src="/i/photo/tulip.jpg" alt="tulip" width="300" height="300">
<p><b>注释：</b>Edge 12 或 Internet Explorer 不支持 filter 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例36：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 270px;
height: 300px;
border: 1px solid black;
display: flex;
}
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex: 3;}
}
</style>
</head>
<body>
<h1>flex 的动画效果：</h1>
<p>Gradually change the flex property of the BLUE div element from 1 to 3, and back:<p>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
<div style="background-color:lightgreen;">GREEN</div>
</div>
<p><b>注释：</b> Internet Explorer 10 supports an alternate, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例37：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 250px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-basis: 200px;}
}
</style>
</head>
<body>
<h1>flex-basis 的动画效果：</h1>
<p>Gradually change the flex-basis property of the BLUE div from 50px to 200px, and back:<p>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例38：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-grow: 8;}
}
</style>
</head>
<body>
<h1>flex-grow 的动画效果：</h1>
<p>Gradually change the flex-grow property of the "blue DIV" from 1 to 8, and back to 1:<p>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;" id="myBlueDiv"></div>
<div style="background-color:khaki;"></div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例39：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-shrink: 8;}
}
</style>
</head>
<body>
<h1>flex-shrink 的动画效果：</h1>
<p>Gradually change the flex-shrink property of the "blue DIV" from 1 to 8, and back to 1:<p>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例40：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font: 40px bold;}
}
</style>
</head>
<body>
<h1>font 的动画效果：</h1>
<p>逐渐更改字体属性：<p>
<div id="myDIV">
<p>This is a paragraph</p>
</div>
<p>font 属性是所有字体属性的简写属性。</p>
<p>在 CSS 中，font-size、font-weight、font-stretch 以及 line-height <em>支持动画制作</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例41：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font-size: 40px;}
}
</style>
</head>
<body>
<h1>font-size 的动画效果：</h1>
<p>逐渐更改文本的字体大小：<p>
<div id="myDIV">
<p>This is a paragraph</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例42：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font-weight: bold;}
}
</style>
</head>
<body>
<h1>font-weight 的动画效果：</h1>
<p>逐渐将字体粗细从正常更改为粗体，然后再恢复为正常：<p>
<div id="myDIV">
<p>This is a paragraph</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例43：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid: auto / auto auto auto auto;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid: 100px / auto auto;}
}
</style>
</head>
<body>
<h1>grid 的动画效果：</h1>
<p>该动画将更改网格布局。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例44：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-area: 1 / 2 / span 3 / span 2;}
}
</style>
</head>
<body>
<h1>grid-area 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例45：
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {
display: grid;
grid-auto-columns: 50px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-columns: 100px;}
}
</style>
</head>
<body>
<h1>grid-auto-columns 的动画效果：</h1>
<p>动画会将列的尺寸从 50px 改为 100px。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例46：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-auto-flow: row;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-flow: column;}
}
</style>
</head>
<body>
<h1>grid-auto-flow 的动画效果：</h1>
<p>该动画将 grid-auto-flow 从行改为列。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例47：
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {
display: grid;
grid-auto-rows: 150px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-rows: 100px;}
}
</style>
</head>
<body>
<h1>grid-auto-rows 的动画效果：</h1>
<p>该动画会将行的尺寸从 150px 改为 100px。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例48：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column: 3 / span 3;}
}
</style>
</head>
<body>
<h1>grid-column 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例49：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-end: span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column-end: span 3;}
}
</style>
</head>
<body>
<h1>grid-column-end 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例50：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-column-gap: 100px;}
}
</style>
</head>
<body>
<h1>grid-column-gap 的动画效果：</h1>
<p>该动画会将列间隔从 10px 改为 100px。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例51：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column-start: 3;}
}
</style>
</head>
<body>
<h1>grid-column-start 的动画效果：</h1>
<p>该动画将更改 "item1" 的位置。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例52：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-gap: 100px;}
}
</style>
</head>
<body>
<h1>grid-gap 的动画效果：</h1>
<p>该动画会把行间隙和列间隙从 10px 改为 100px。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例53：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row: 1 / span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row: 1 / span 3;}
}
</style>
</head>
<body>
<h1>grid-row 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例54：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-end: span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row-end: span 3;}
}
</style>
</head>
<body>
<h1>grid-row-end 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例55：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-row-gap: 100px;}
}
</style>
</head>
<body>
<h1>grid-row-gap 的动画效果：</h1>
<p>该动画会把行间隔从 10px 更改为 100px。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例56：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row-start: 3;}
}
</style>
</head>
<body>
<h1>grid-row-start 的动画效果：</h1>
<p>该动画将更改 "item1" 的外观。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例57：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: auto / auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template: 100px / auto auto;}
}
</style>
</head>
<body>
<h1>grid-template 的动画效果：</h1>
<p>该动画将更改网格布局。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例58：
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-areas: '. . . myArea myArea';}
}
</style>
</head>
<body>
<h1>grid-template-areas 的动画效果：</h1>
<p>该动画将更改 "item1" 的位置。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例59：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-columns: auto auto;}
}
</style>
</head>
<body>
<h1>grid-template-columns 的动画效果：</h1>
<p>动画将列数从四改为二。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例60：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-rows: 100px;}
}
</style>
</head>
<body>
<h1>grid-template-rows 的动画效果：</h1>
<p>该动画会将第一行的尺寸改为 100px，然后再改回。</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例61：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {height: 500px;}
}
</style>
</head>
<body>
<h1>height 的动画效果：</h1>
<p>逐步将 div 元素的高度从 100px 改为 500px，然后再改回 100px：<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例62：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {left: 500px;}
}
</style>
</head>
<body>
<h1>left 的动画效果：</h1>
<p>逐渐把 div 元素的左侧位置从 0 改500px，然后再改回 0：<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例63：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
letter-spacing: 2px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {letter-spacing: 50px;}
}
</style>
</head>
<body>
<h1>letter-spacing 的动画效果：</h1>
<p>逐渐将 div 元素的字母间距属性从 2px 改为 50px，然后再改回 2px：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例64：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
line-height: 16px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {line-height: 50px;}
}
</style>
</head>
<body>
<h1>line-height 的动画效果：</h1>
<p>逐渐将 div 元素的 line-height 属性从 16px 改为 50px，然后再改回 16px：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例65：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin: 50px;}
}
</style>
</head>
<body>
<h1>margin 的动画效果：</h1>
<p>逐渐将外边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例66：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-bottom: 50px;}
}
</style>
</head>
<body>
<h1>margin-bottom 的动画效果：</h1>
<p>逐渐将下外边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例67：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-left: 50px;}
}
</style>
</head>
<body>
<h1>margin-left 的动画效果：</h1>
<p>逐渐将左外边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例68：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-right: 50px;}
}
</style>
</head>
<body>
<h1>margin-right 的动画效果：</h1>
<p>逐渐将右外边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例69：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-top: 50px;}
}
</style>
</head>
<body>
<h1>margin-top 的动画效果：</h1>
<p>逐渐将上外边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例70：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {max-height: 100px;}
}
</style>
</head>
<body>
<h1>max-height 的动画效果：</h1>
<p>将最大高度从 "none" 更改为 "100px"，然后再改回 "none"：<p>
<div id="myDIV">
<p>该 div 元素没有预定义的高度。</p>
<p>动画会将最大高度从 "none" 更改为 "100px"。</p>
<p>该 div 元素的高度将不超过 100 个像素。</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例71：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {max-width: 600px;}
}
</style>
</head>
<body>
<h1>max-width 的动画效果：</h1>
<p>Change the max-width from "none" to "600px", and back to "none":<p>
<div id="myDIV">
<p>该 div 元素没有预定义的宽度。</p>
<p>尝试调整浏览器窗口的大小，来查看这个 div 元素的宽度将随之扩展或收缩，但宽度永远不会超过 600 像素。</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例72：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {min-height: 400px;}
}
</style>
</head>
<body>
<h1>min-height 的动画效果：</h1>
<p>将最小高度从 "none" 更改为 "400px"，然后再改会 "none"：<p>
<div id="myDIV">
<p>该 div 元素没有预定义的高度。</p>
<p>动画会将最小高度从 "none" 更改为 "400px"。</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例73：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 50%;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {min-width: 800px;}
}
</style>
</head>
<body>
<h1>min-width 的动画效果：</h1>
<p>将最小宽度从 "none" 改为 800px，然后再改回 "none"：<p>
<p><b>注释：</b>min-width 属性会覆盖 width 属性。</p>
<div id="myDIV">
<p>该 div 元素的预定义宽度是：50％。</p>
<p>动画将逐渐将最小宽度更改为 800 像素。</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例74：
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
width: 200px;
height: 400px;
object-fit: cover;
object-position: 0% 0%;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {
object-position: 0% 0%;
}
25% {
object-position: 20% 0%;
}
100% {
object-position: 100% 100%;
}
}
</style>
</head>
<body>
<h1>object-position 的动画效果：</h1>
<p>逐渐更改图像在其内容框中的位置：<p>
<img src="/i/photo/tulip.jpg" alt="Tulip" id="myImg" width="400" height="300">
<p class="note"><span>注释：</span>Internet Explorer/Edge 15 或更早的版本不支持 object-position 和 object-fit 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例75：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
top: 200px;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
#DIV2 {
position: absolute;
top: 180px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
@keyframes mymove {
50% {opacity: 0;}
}
</style>
</head>
<body>
<h1>opacity 的动画效果：</h1>
<p>将蓝色 div 元素的不透明度从 1 更改为 0，然后再改回 1：<p>
<div id="DIV2">
<h1>Voila!</h1>
</div>
<div id="myDIV">
</div>
<p>在 CSS 中，opacity 属性<em>支持动画支持</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例76：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
#myGreenDIV {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {order: 6;}
}
</style>
</head>
<body>
<h1>order 的动画效果：</h1>
<p>将绿色 div 元素的顺序从 1 更改为 6，然后改回 1：<p>
<div id="main">
<div style="background-color:lightgreen;order:1;" id="myGreenDIV"></div>
<div style="background-color:coral;order:2;"></div>
<div style="background-color:lightblue;order:3;"></div>
<div style="background-color:pink;order:4;"></div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例77：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>outline 的动画效果：</h1>
<p>逐渐更改 outline 属性：<p>
<div id="myDIV"></div>
<p>outline 属性是所有轮廓属性的简写属性。</p>
<p>请参阅单个轮廓属性，来查看哪个属性<em>支持动画制作</em>。</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例78：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 15px solid red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-color: blue;}
}
</style>
</head>
<body>
<h1>outline-color 的动画效果：</h1>
<p>逐渐将 outline-color 属性从红色改为蓝色，然后再改回红色：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例79：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-offset: 50px;}
}
</style>
</head>
<body>
<h1>outline-offset 的动画效果：</h1>
<p>逐渐将 outline-offset 属性从 0 改为 50px，然后再改回 0：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例80：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-width: 50px;}
}
</style>
</head>
<body>
<h1>outline-width 的动画效果：</h1>
<p>逐渐将 outline-width 属性从 5px 更改为 50px，然后再改回 5px：<p>
<div id="myDIV"></div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例81：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding: 50px;}
}
</style>
</head>
<body>
<h1>padding 的动画效果：</h1>
<p>逐渐将内边距从 0px 更改为 50px，然后再改回 0px：<p>
<div id="myDIV">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! ...
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例82：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-bottom: 50px;}
}
</style>
</head>
<body>
<h1>padding-bottom 的动画效果：</h1>
<p>逐渐将下内边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! ...
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例83：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-left: 50px;}
}
</style>
</head>
<body>
<h1>padding-left 的动画效果：</h1>
<p>逐渐将 padding-left 从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!...
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例84：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-right: 150px;}
}
</style>
</head>
<body>
<h1>padding-right 的动画效果：</h1>
<p>逐渐将右内边距从 0px 改为 150px，然后再改回 0px：<p>
<div id="myDIV">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! ...
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例85：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-top: 50px;}
}
</style>
</head>
<body>
<h1>padding-top 的动画效果：</h1>
<p>逐渐将上内边距从 0px 改为 50px，然后再改回 0px：<p>
<div id="myDIV">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! ...
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例86：
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
animation: mymove 5s infinite;
perspective: 200px;
}
@keyframes mymove {
50% {perspective: 100px;}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>perspective 的动画效果：</h1>
<div id="div1">DIV1
<div id="div2">请想象您正在墙上向下看。看看逐渐改变视角会发生什么！</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例87：
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
perspective: 125px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {perspective-origin: 10px 50%;}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: coral;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>perspective-origin 的动画效果：</h1>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例88：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {right: 500px;}
}
</style>
</head>
<body>
<h1>right 的动画效果：</h1>
<p>逐渐将 DIV 元素的右侧位置从 0 改为 500px，然后再改回 0：<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例89：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
text-decoration: underline;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
text-decoration-color: red;
}
}
</style>
</head>
<body>
<h1>text-decoration-color 的动画效果：</h1>
<p>逐渐将下划线的颜色从黑色更改为红色，然后再更回为：<p>
<div id="myDIV">
<p>This is a paragraph</p>
</div>
<p><b>注释：</b>text-decoration-color 在版本 79 之前的 Edge 中无效。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例90：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {text-indent: 150px;}
}
</style>
</head>
<body>
<h1>text-indent 的动画效果：</h1>
<p>逐渐将文本缩进从 0 改为 150px，然后再改回 0：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例91：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {text-shadow: 10px 20px 30px blue;}
}
</style>
</head>
<body>
<h1>text-shadow 的动画效果：</h1>
<p>逐渐更改 text-shadow 属性：<p>
<div id="myDIV">
<h1>This is a header</h1>
<p>This is a paragraph</p>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例92：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
top: 0;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {top: 300px;}
}
</style>
</head>
<body>
<h1>top 的动画效果：</h1>
<p>逐渐将 top 属性从 0 改为 300px，然后再改回 0：<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例93：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<h1>transform 的动画效果：</h1>
<p>逐渐将 div 元素旋转 180 度，然后转回来：<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例94：
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 200px;
width: 200px;
margin: auto;
border: 1px solid black;
}
#DIV2 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: coral;
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg);
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {transform-origin: 0 0 0;}
}
#DIV2original {
position: absolute;
width: 150px;
height: 150px;
border: 1px dashed grey;
background-color: lightgrey;
opacity: 0.5;
}
</style>
</head>
<body>
<h1>transform-origin 的动画效果：</h1>
<p>逐渐将 transform-origin 从 "50% 50% 0" 改为 "0 0 0"，然后再改回：<p>
<p><b>注释：</b>这个灰色的 DIV 元素指示 DIV2 元素在不进行转换的情况下的位置。</p>
<div id="DIV1">DIV1
<div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例95：
<!DOCTYPE html>
<html>
<head>
<style>
#myIMG {
vertical-align: 50px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {vertical-align: 100px;}
}
</style>
</head>
<body>
<h1>vertical-align 的动画效果：</h1>
<p>逐渐将图像元素的 vertical-align 属性从 0 改为 100px，然后再改回 0：<p>
<p><img id="myIMG" src="smiley.gif" width="32" height="32">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</p>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例96：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 120px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {width: 500px;}
}
</style>
</head>
<body>
<h1>width 的动画效果：</h1>
<p>逐渐将 DIV 元素的宽度从 120px 更改为 500px，然后再改回 120px：<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例97：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {word-spacing: 50px;}
}
</style>
</head>
<body>
<h1>word-spacing 的动画效果：</h1>
<p>逐渐将 div 元素的字距从“普通”更改为 50px，然后再改回“普通”：<p>
<div id="myDIV">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例98：
<!DOCTYPE html>
<html>
<head>
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: coral;
z-index: 1;
animation: mymove 5s infinite linear;
}
@keyframes mymove {
50% {z-index: 5;}
}
</style>
</head>
<body style="position:absolute">
<h1>z-index 的动画效果：</h1>
<p>逐渐将 "myBox" 的 z-index 属性从 1 改为 5，然后再改回 1：<p>
<div id="container">
<div id="myBox">myBox</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
<p><b>注释：</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
