这是一个系列的文章，你也可以查看其他文章：
0、
CSS-预热篇
7、
CSS（七）两栏布局详解
一、概念
CSS Animation需要指定动画一个周期重复的次数、是否轮流反向播放动画，以及动画效果的名称，其他和transation类似。
二、语法
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name（规定需要绑定到选择器的 keyframe 名称。）
- animation-duration（规定完成动画所花费的时间，以秒或毫秒计。）
- animation-timing-function（规定动画的速度曲线。）
- animation-delay（规定在动画开始之前的延迟。）
- animation-iteration-count（规定动画应该播放的次数。）
- animation-direction（规定是否应该轮流反向播放动画。）
语法：
<single-animation>#
where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
三、基本用法举例（W3C示例稍有改动）：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: greenyellow;
position: relative;
animation: mycub 5s infinite;
-webkit-animation: mycub 5s infinite;
/*Safari and Chrome*/
}
@keyframes mycub {
from {
top: 0px;
}
to {
top: 200px;
}
}
@-webkit-keyframes mycub
/*Safari and Chrome*/
{
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9-不支持 animation 属性。</p>
<div></div>
</body>
</html>四、兼容性
五、参考资料
1、腾讯云《
CSS3动画animation
》
2、阮一峰《
CSS动画简介
》
3、w3cschool《
animation属性
》
4、MDN《
animation
》
5、CSS3 Working Draft 《
animation
》
版权声明：本文为u014744118原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。