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;}