animation和上次说的transform动画有点不同,需要进行定义动画规则,而animation则无需受体,自动执行动画,translation则需要某个动作执行才进行动画!
下面看一个animation参数
animation: run 3s linear 0.5s infinite;
第一个参数是这个运动的规则,第二个指定该运动的执行时间 第三个参数指定运动曲线(linear匀速)
第四个是一个完整动作执行完毕后延时(暂停时间),infinite(重复)动画是否重复;
一般只需要指定动画规则和运动时间这个动画就可以正常执行!
上面指定了一个正常的animation,下面当然要设置运动规则
@keyframes run{
0%{
width:300px;
}
30%{
width:600px;
}60%{
width:900px;
}
80%{
width:600px;
}
100%{
width:300px;
}
}
@keyframes是执行规则定制开头,第二个run是在animation时候定义的动画规则名字
上述指定了run的规则从0%到100%,这个过程实质上是整个运动时间的百分比,还有下面一种方式定义规则
@keyframes run{
form{
}
to{
}
}
form开始时候状态,to结束时候状态
animation还有一个参数alternate(反转):正向完成一个动画后则反向继续运动.一个动画从0%到100%执行一次,100%到0%过程(则为反转alternate)
如果指定alternate(反转)则第1,3,5,7...奇数次运动则为顺时针(正向),2,4,6,8,10...偶数次运动则为逆时针(反向)
看一下转盘选择demo实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animetation大转盘</title>
<style>
img{
width:550px;
height:550px;
border: 10px solid #a66ffa;
margin:200px auto;
border-radius:50%;
display: block;
animation: run 5s linear infinite;
/*alternate 反转(逆时针)*/
}
img:hover{
animation-play-state:paused ;
}
/*定义运动规则*/
@keyframes run{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<img src="http://i.niupic.com/images/2018/03/11/vivSSI.jpg" alt="" />
</body>
</html>
这个demo可能会发现一个新的属性animation-play-state:paused;这个这指定了animation的动画暂停!
animation更多属性参考w3c规则常用属性大概就这么些!