html 帧动画

html 帧动画

一、帧动画

1、定义关键帧

@keyframes 动画名称（英文） {           0% {               /* 动画的开始 */           }
​           25% {               /* 在25%的时候进行的一个动画 */           }
​           50% {               /* 在50%的时候进行的一个动画 */           }
​           100% {               /* 动画结束 */           }
​       }
​   from,to表示开始、结束状态，也可以使用0%,100%定义
​       @keyframes 动画名称（英文） {           from {               /* 动画开始 */           }
​           to {               /* 动画结束 */           }       }       

2、引用帧动画

 animation: name duration timing-function delay iteration-count direction fill-mode;animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态
​  注意：动画名称和动画执行时间必须写，否则动画无效
​       1.animation-name 动画名称 是定义关键帧是所定义的动画名称
​       2.animation-duration 动画的执行时间  单位：s/ms
​       3.animation-timing-function 规定动画运动的速度曲线          1.linear 相同的速度从开始到结束，