CSS 动画相关属性
定义和用法
一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。
可设置动画的属性可以从一个值逐渐更改为另一个值,例如尺寸、数字、百分比和颜色。
浏览器支持
表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。
-webkit-、-moz- 或 -o- 后面的数字注明了使用前缀的第一个版本。
43.04.0 -webkit- | 10.0 | 16.05.0 -moz- | 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- |
实例
设置背景颜色从红色到蓝色的动画:
<!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>
<h2>背景颜色动画</h2>
<p>逐渐将背景颜色从红色更改为蓝色:<p>
<div id="myDIV"></div>
<p><b>注释:</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
</body>
</html>
动画相关属性
下面的表格中列出了 CSS 中的动画相关属性: