css3动画 animation

animation 实现一个旋转鼠标放上暂停
https://codepen.io/bb798sky/pen/KOeEZE

---

animation 八个属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成 (1s、2s、1.5s、1500ms)
animation-timing-function	设置动画将如何完成一个周期 ( linear:匀速、 ease:低速开始结束时变慢(默认)、 ease-in:低速开始、 ease-out:低速结束、 ease-in-out：低速开始变快低速结束 cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值0 到 1 的数值。 )
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数 infinite
animation-direction	指定是否应该轮流反向播放动画 normal:默认正常、 reverse:反向、 alternate:动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放、 alternate-reverse:同上相反;
animation-fill-mode	forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）iteration-count不能是infinite。
animation-play-state	指定动画是否正在运行或已暂停 常用通过加伪类 animation-play-state:paused; 暂停动画

旋转鼠标放上暂停css示例

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myrotate 1500ms infinite;
  	animation-timing-function: linear;
}

div:hover{
  animation-play-state:paused;
}

@keyframes myrotate
{
	from {transform:rotateZ(0deg)}
	to {transform:rotateZ(360deg)}
}