css3动画

一、定义动画

@keyframes 动画名{

from{起始时的样式}

to{终止时的样式}

}

@keyframes 动画名{

0%{起始时的样式}

20%{中间的样式1}

50%{中间的样式2}

。。。。

100%{最后的样式}

}

二、使用动画

选择器{

animation: 动画名  动画的执行时间  运动曲线  延迟时间  播放次数  是否反方向

}

三、运动曲线

  ease 抛物线  linear 匀速运动 cubic-bezier(x,x,x,x);这个是任意曲线,要查官网

四、停止运动

  选择器{

    animation-play-state:paused;//控制动画暂停

}