自定义动画

animation-name      设置动画名称

例如，创建名称为kt的自定义动画：

div{animation-name:kt;}

keyframes    关键帧 用于设置动画的细节（细节到帧，名字对应相对的动画名称animation-name

例如，设置一个div从左向右移动的动画：(动画名称为自定义的kt，下同)

@keyframe kt{
	from{margin-left: 0px;}
	to{margin-left: 100px;}
}

** 可以用百分比设置更加细节的内容

 

animation-duration  动画时间 定义一个完整动画的时间

例如，设置kt动画的完成时间是2s：

div{animation-duration:2s;}

animation-timing-function  动画过渡函数，描述过渡速度上的细节

ease       逐渐加速

linear     匀速

ease-in   加速

ease-out   减速

ease-in-out   先减速再减速

cubic-bezier   自定义

例如，设置动画为先加速后减速：

div{animation-timing-function:ease-in-out;}

animation-delay   动画开始前的延迟时间，可以理解为触发动画的等待时间

例如，设置鼠标悬停1s后再启动动画：

div:hover{animation-delay:1s;}

animation-iteration-count     动画执行次数，默认为1次，也可以设置为infinite，代表无数次

例如，想动画执行3次后停止：

div{animation-lteration-count:3;}

animation-direction       动画的方向，默认为normal（原动画），reverse反方向，alternate正方向反方向交替，alternate-reverse反方向正方向交替

**alternate和alternate-reverse必须在动画执行2次以上时才有效果

例如，设置div左右反复移动时的属性：

div{animation-direction:alternate;}

animation-play-state    动画状态    running运行（默认）， paused暂停

可以用于鼠标悬停时暂停，例如：

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

animation-fill-mode    动画结束后的状态，默认为none，forwards停留在结束状态，backwards回到开始状态，both结束或开始状态

例如，要让动画完成后不动，即停留在结束状态：

div{animation-fill-mode:forwards;}

animation               自定义动画缩写，将以上属性全部写在一起

格式参考：animation:动画名 持续时间 动画函数 动画延迟 动画执行数 动画方向 结束状态 运行状态;

例如，设置名为kt的动画持续2s，先加速后减速，延迟1s，执行10次，正反方向交替，结束后停留在结束状态，鼠标悬停时暂停：

div{animation:kt 2s ease-in-out 1s 10 alternate forwards;}
div:hover{animation-play-state:paused;}