CSS3动画animation

一、什么是帧

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。

二、什么是关键帧

关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧。

三、动画的基本使用

第一步：定义关键帧（定义动画）

• 1. 简单方式定义：

/*写法一*/
@keyframes 动画名testKey {
  from {
    /*property1:value1*/
    /*property2:value2*/
  }
  to {
    /*property1:value1*/
  }
}

• 2. 完整方式定义：

@keyframes 动画名testKey {
  0% {
    /*property1:value1*/
  }
  20% {
    /*property1:value1*/
  }
  40% {
    /*property1:value1*/
  }
  60% {
    /*property1:value1*/
  }
  80% {
    /*property1:value1*/
  }
  100% {
    /*property1:value1*/
  }
}

第二步：给元素应用动画，用到的属性如下：

• animation-name ：给元素指定具体的动画（具体的关键帧）
• animation-duration ：设置 CSS3 动画的持续时间 , 默认为 0
• animation-delay ：设置动画延迟

.box {
  /* 指定定义的动画名 */
  animation-name: testKey;
  /* 设置动画所需时间 */
  animation-duration: 5s;
  /* 设置动画延迟 */
  animation-delay: 0.5s;
}

四、动画的其他属性

animation-timing-function ，设置动画的类型，常用值如下：

• ease ： 平滑动画 —— 默认值
• linear ： 线性过渡
• ease-in ： 慢 → 快
• ease-out ： 快 → 慢
• ease-in-out ： 慢 → 快 → 慢
• step-start ： 等同于 steps(1, start)
• step-end ： 等同于 steps(1, end)
• steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。
• cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。

animation-iteration-count ，指定动画的播放次数，常用值如下：

• number ：动画循环次数
• infinite ： 无限循环

animation-direction ，指定动画方向，常用值如下：

• normal ： 正常方向 (默认)
• reverse ： 反方向运行
• alternate ： 动画先正常运行再反方向运行，并持续交替运行
• alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode ，设置动画之外的状态

• forwards ： 设置对象状态为动画结束时的状态
• backwards ： 设置对象状态为动画开始时的状态

animation-play-state ，设置动画的播放状态，常用值如下：

• running ： 运动 (默认)
• paused ： 暂停

五、动画复合属性

只设置一个时间表示 duration ，设置两个时间分别是： duration 和 delay ，其他属性没有数量和顺序要求。

.inner {
  animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}

备注： animation-play-state 一般单独使用。