动画模块

动画模块

• 格式：
  1.animation-name: asd;（取值是自己命名，告诉系统需要执行哪个动画）

2. @keyframes lnj {
        from{
   
        }
        to{
   
        }
                   }
   

（告诉系统我们需要自己创建一个名称叫做lnj的动画）
3.animation-duration: 3s;（告诉系统动画持续的时长）

• 其他属性
• animation-delay: 2s;（告诉系统多少秒之后开始执行动画）
• animation-timing-function: linear;（匀速）（告诉系统动画执行的运行速度）
• animation-iteration-count: 3;（告诉系统动画需要执行几次）
• animation-direction: alternate;（告诉系统是否需要执行往返动画）
  • normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
  • alternate, 往返动画, 执行完一次之后往回执行下一次
• animation-play-state: paused;（告诉系统当前动画是否需要暂停）（放在：hover里使用）
• 取值:
  running: 执行动画
  paused: 暂停动画
• 过渡和动画之间的异同：
• 不同点：
  • 过渡必须人为的触发才会执行动画
  • 动画不需要人为的触发就可以执行动画
• 相同点
  • 过渡和动画都是用来给元素添加动画的
  • 过渡和动画都是系统新增的一些属性
  • 过渡和动画都需要满足三要素才会有动画效果

通过我们的观察, 动画是有一定的状态的

1.等待状态
2.执行状态
3.结束状态

• animation-fill-mode作用:
• 指定动画等待状态和结束状态的样式
• 取值:
  none: 不做任何改变
  forwards: 让元素结束状态保持动画最后一帧的样式
  backwards: 让元素等待状态的时候显示动画第一帧的样式
  both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
• 动画模块连写格式：
• animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
• 动画模块连写格式的简写：
• animation:动画名称 动画时长;