首页 > 代码库 > CSS Animation
CSS Animation
1 div { 2 /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/ 3 -webkit-animation-name: myfirst; /*规定 @keyframes 动画的名称。*/ 4 -webkit-animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/ 5 -webkit-animation-timing-function: linear;/*设置动画的速度曲线,默认是 "ease"。*/ 6 -webkit-animation-delay: 2s; /*设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。*/ 7 -webkit-animation-iteration-count: infinite;/*规定动画被播放的次数。默认是 1。*/ 8 -webkit-animation-direction: alternate;/*设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。*/ 9 -webkit-animation-play-state: running;/*规定动画是否正在运行或暂停。默认是 "running"。*/10 /* Standard syntax */11 animation-name: myfirst;12 animation-duration: 5s;13 animation-timing-function: linear;14 animation-delay: 2s;15 animation-iteration-count: infinite;16 animation-direction: alternate;17 animation-play-state: running;18 }
可以缩写为
div { -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */ animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */}
补充：
animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。默认值normal不循环，reverse反向运行，alternate正常运行完后反向运行依次循环，alternate-reverse先反向运行后正常运行依次循环
http://www.w3schools.com/cssref/playit.asp?filename=playcss_animation-direction&preval=normal
animation-timing-function
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
animation-fill-mode
指定动画执行前后如何为目标元素应用样式。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode
例子中div至少要设置动画的名称和时长，然后在@keyframes中创建动画，绑定到div的选择器（动画名称）
@keyframes至少要创造两帧以上
完整例子：
<!DOCTYPE html><html><head><style> div { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s;}/* Chrome, Safari, Opera */@-webkit-keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}/* Standard syntax */@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}</style></head><body><p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p><div></div></body></html>
旋转：
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}@-o-keyframes rotate { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); }}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}摇摆：
@-moz-keyframes arm { from { -moz-transform: rotate(-4deg); } to { -moz-transform: rotate(4deg); }}@-o-keyframes arm { from { -o-transform: rotate(-4deg); } to { -o-transform: rotate(4deg); }}@keyframes arm { from { transform: rotate(-4deg); } to { transform: rotate(4deg); }}@-webkit-keyframes arm { from { -webkit-transform: rotate(-4deg); } to { -webkit-transform: rotate(4deg); }}css3-transform:
http://www.w3cplus.com/content/css3-transform