CSS Animation

translation可以实现动画的过渡效果，但是过渡动画也存在一些缺点

• transition只能定义开始状态和结束状态，不能定义中间状态
• transition 不能重复执行，除非再一次触发动画
• transition 需要在特定状态下触发才可以执行，例如某个属性被修改

为了实现更多的状态变化，可以使用CSS Animation,CSS Animation分为两个步骤实现

• 使用keyframes定义动画序列，即每一帧的动画如何执行
• 配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等

@keyframes规则

使用@keyframes来定义多个变化状态，并且使用animation-name 来声明匹配，关键帧使用百分比来指定动画发生的时间点；0% 表示动画的第一时刻，100% 表示动画的最终时刻；动画发生的起始时间和结束时间点可以分别使用from和to关键字来表示

animation属性

animation属性是下面所有属性的简写

• animation-name: 执行动画的名称
• animation-duration: 指定动画的持续时间
• animation-timing-function: 指定动画的变化曲线
• animation-delay: 指定延迟的时间
• animation-iteration-count: 指定动画的执行次数，infinite表示无限次的执行动画
• animation-direction: 指定方向，常用值是normal 和reverse
• animation-fill-mode: 执行动画最后保留哪一个值
  • none: 回到没有执行官动画的位置
  • forwards: 动画最后一帧的位置
  • backwards: 动画第一帧的位置
• animation-play-state: 指定动画运行或者暂停,一般使用JS控制