animation 简写属性CSS3
animation-name 规定@keyframes动画名称
animation-duration 动画花费时间 默认0
animation-delay 动画何时开始/秒(多少秒开始)
animation-timing-function 动画速度曲线
linear 匀速 从头到尾一样
ease 默认,低速开始,加快,结束前变慢
ease-in 从低速开始
ease-out 以低速结束
animation-iteration-count 播放次数
infinite无限
(动画-反复-计算:播放次数)
用在:hover后面
animation-play-state 是否暂停
paused 暂停
running 正常播放
animation-direction (播放)之后逆向播放
轮流反方向
alternate
默认播放正常单方向
animation-fill-mode 保持最后一个属性值
none 不改变(默认值)
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
backwards 在
animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
both 向前和向后填充模式都被应用
综合所有
animation:name(名字) duration(花费时间) timing-function(速度曲线) delay(何时开始) iteration-count(次数) directing(逆向)
动画启动
@keyframes name{
from{left:0;} 开始属性值
To {left:-400px;}结束属性值
}
@keyframes
name {keyframes-selector {css-styles;}}
animationname 定义动画的名称。
keyframes-selector 动画时长的百分比。
0-100%
from(与 0% 相同) to(与 100% 相同)
可以只有to
css-styles 一个或多个合法的 CSS 样式属性。
动画事件:
动画开始:
obj.addEventListener("webkitAnimationStart", fn);
obj.addEventListener("animationstart", fn);
动画执行过程中触发:
obj.addEventListener("webkitAnimationIteration", fn);
obj.addEventListener("animationiteration", fn);
动画结束是触发:
obj.addEventListener('webkitAnimationEnd',fn);
obj.addEventListener('animationend',fn);
rotateY(-.5turn)
来段代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{ padding: 0; margin: 0; list-style: none;} #box{ width: 440px; height: 110px; border: 1px solid red; margin: auto; position: relative; overflow: hidden; } #pic{ width: 880px; position: absolute; /* animation-name: onr; 名字 animation-duration: 5s; 花费时间速度 animation-timing-function:linear; 运动速度曲线 animation-delay: 1s; 何时开始 animation-iteration-count:infinite; 播放次数 animation-direction:alternate; 一次后逆向播放 */ animation: onr 5s linear infinite; } #pic:hover{animation-play-state:paused;} #pic li{ width: 100px; height: 100px; margin: 5px; float: left; } @keyframes onr { from{ left: 0;} to{left: -440px} } </style> </head> <body> <div id="box"> <ul id="pic"> <li style="background: blue"></li> <li style="background: yellowgreen"></li> <li style="background: yellow"></li> <li style="background: darkorange"></li> <li style="background: blue"></li> <li style="background: yellowgreen"></li> <li style="background: yellow"></li> <li style="background: darkorange"></li> </ul> </div> </body> </html>