动画模块
动画模块与过渡模块的异同
- 与过渡模块不一样的是,过渡模块需要人为出发才会启动;
- 其他类似,都是给元素添加动画的;
- 都需要满足三要素;
书写三要素
- 告诉系统执行哪个动画
animation-name: 动画名称;
- 创建这个动画;
@keyframes abcd{}
- 告诉系统动画执行多长时间
animation-duration: 3s;
- 其他属性见W3C!
如果有多个from->to怎么办?
0{}->25%->50%->75%->100%;
动画的三种状态
- 等待状态
- 执行状态
- 结束状态
- 其中
animation-fill-mode: backwards;
用来指定动画等待状态或者结束状态的样式 - 比如:backwards用于让元素等待状态的时候显示动画第一帧的样式
- 比如:forwards用于让元素结束的状态保持动画最后一帧的样式;
动画模块连写
- animation:动画名称、动画时长、动画运动速度、延迟时间、执行次数、往返动画;
- 可以使用单词比如无限次次数可以写为infinite;