标签：ase fun height radius 名称 运行时间 art header 包括
css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效果；
在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。
animation作为一个复合属性，包括了以下动画属性。
规定动画的速度曲线。默认是 "ease"。常用的运动速度曲线还有以下几种：
也可以直接使用贝塞尔曲线规定运行的速度曲线，贝塞尔曲线的4个数值需在[0, 1]区间内。
规定动画是否在下一周期逆向播放。默认是 "normal"。
规定对象动画时间之外的状态。常用值如下：
实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沿圆形轨迹运动</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #trajectory { width: 300px; height: 300px; border: 4px solid #949494; border-radius: 50%; position: relative; left: calc(50% - 153px); top:calc(50% - 153px); } @keyframes moveX{ 0% {left: -22px;} 100% {left: 282px;} } @keyframes moveY{ 0% {top: -22px;} 100% {top: 282px;} } #move { width: 40px; height: 40px; font-size: 12px; background-color: #32c33a; border-radius: 50%; position: absolute; left:-22px; top:-22px; animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate; } </style> </head> <body> <div id="trajectory"> <div id="move">Immortal brother</div> </div> </body> </html>
以上代码的注意点如下：
标签：ase fun height radius 名称 运行时间 art header 包括
原文地址：http://www.cnblogs.com/Immortal-brother/p/7683077.html
