前端入门part23动画模块

动画模块

动画模块与过渡模块的异同

• 与过渡模块不一样的是，过渡模块需要人为出发才会启动；
• 其他类似，都是给元素添加动画的；
• 都需要满足三要素；

书写三要素

• 告诉系统执行哪个动画 animation-name: 动画名称;
• 创建这个动画；@keyframes abcd{}
  
• 告诉系统动画执行多长时间 animation-duration: 3s;
• 其他属性见W3C！
  
  如果有多个from->to怎么办？
  0{}->25%->50%->75%->100%;

动画的三种状态

• 等待状态
• 执行状态
• 结束状态
• 其中animation-fill-mode: backwards;用来指定动画等待状态或者结束状态的样式
• 比如：backwards用于让元素等待状态的时候显示动画第一帧的样式
• 比如：forwards用于让元素结束的状态保持动画最后一帧的样式；

动画模块连写

• animation：动画名称、动画时长、动画运动速度、延迟时间、执行次数、往返动画；
• 可以使用单词比如无限次次数可以写为infinite；