css的animation动画_css animation

---

css 动画的语法

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现

keyframes 规则的设定

• 使用百分比

@keyframes test {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
1
2
3
4
5
6
7
8

• 使用 from 及 to

@keyframes test {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
1
2
3
4
5
6
7
8

• 当然，当我们的关键帧不止 2 帧的时，更推荐使用百分比定义的方式

• 除此之外，当动画的起始帧等同于 CSS 规则中赋予的值并且没有设定 animation-fill-mode，0% 和 from 这一帧是可以删除的

animation-delay 详解

animation-delay 就比较有意思了，它可以设置动画延时，即从元素加载完成之后到动画序列开始执行的这段时间

• animation 属性，也可以简写为 animation: test 2s 1s，第一个时间值表示持续时间，第二个时间值表示延迟时间

div {
  width: 100px;
  height: 100px;
  background: #000;
  animation-name: test;
  animation-duration: 2s;
}

div:nth-child(2) {
  animation-delay: 1s;
}

@keyframes test {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(200px);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

animation-delay 可以为负值

关于 animation-delay，最有意思的技巧在于，它可以是负数。也就是说，虽然属性名是动画延迟时间，但是运用了负数之后，动画可以提前进行

• 下面是一个三球旋转的 dome：

.div:nth-child(1) {
  animation: test 3s infinite linear;
}
.div:nth-child(2) {
  animation: test 3s infinite -1s linear;
}
.div:nth-child(3) {
  animation: test 3s infinite -2s linear;
}
1
2
3
4
5
6
7
8
9

animation-duration 和 animation-delay 构建随机效果

同一个动画，我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay，可以有效的构建更为随机的动画效果，让动画更加的自然

• animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

• 我们利用 sass 的循环和 random() 函数，让 animation-duration 在 2-4 秒范围内随机，让 animation-delay 在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果

@for $i from 1 to 11 {
  li:nth-child(#{$i}) {
    animation-duration: #{random(2000) / 1000 + 2}s;
    animation-delay: #{random(1000) / 1000 + 1}s;
  }
}
1
2
3
4
5
6

animation-timing-function 缓动函数

缓动函数在动画中非常重要，它定义了动画在每一动画周期中执行的节奏

• 缓动主要分为两类：

  • cubic-bezier-timing-function 三次贝塞尔曲线缓动函数
  • step-timing-function 步骤缓动函数

• animation-timing-function 属性可接受以下值：

  • ease - 动画以低速开始，然后加快，在结束前变慢(默认)
  • linear - 匀速，动画从头到尾的速度是相同的
  • ease-in - 动画以低速开始
  • ease-out - 动画以低速结束
  • ease-in-out - 动画以低速开始和低速结束
  • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

• 这里有个非常好用的网站 – https://cubic-bezier.com/ 用于创建和调试生成不同的贝塞尔曲线参数

步骤缓动函数的几种表现形态

{
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}
1
2
3
4
5
6
7

• 在 CSS 中，使用步骤缓动函数最多的，就是利用其来实现逐帧动画，我们利用 animation-timing-function: steps(6) 可以将其用一个 CSS 动画串联起来

.box {
  width: 256px;
  height: 256px;
  background: url('@/assets/img/test.jpg');
  animation: test 0.6s steps(6, end) infinite;
}
@keyframes test {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1536px 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 首先要知道，刚好 256 x 6 = 1536，所以上述图片其实可以刚好均分为 6 段：
  • 我们设定了一个大小都为 256px 的 div，给这个 div 赋予了一个 animation: sprite .6s steps(6) infinite 动画
  • 其中 steps(6) 的意思就是将设定的 @keyframes 动画分为 6 次（6 帧）执行，而整体的动画时间是 0.6s，所以每一帧的停顿时长为 0.1s
  • 动画效果是由background-position: 0 0 到 background-position: -1536px 0，由于上述的 CSS 代码没有设置 background-repeat，所以其实 background-position: 0 0 是等价于 background-position: -1536px 0，就是图片在整个动画过程中推进了一轮，只不过每一帧停在了特点的地方，一共 6 帧
• 其实在动画过程中，background-position 的取值其实只有 background-position: 0 0，background-position: -256px 0，background-position: -512px 0 依次类推一直到 background-position: -1536px 0，由于背景的 repeat 的特性，其实刚好回到原点，由此又重新开始新一轮同样的动画

同个动画效果的补间动画和逐帧动画演绎对比

• 上述的三次贝塞尔曲线缓动和步骤缓动，其实就是对应的补间动画和逐帧动画
• 通过设置steps将补间动画变成逐帧动画

.box {
  animation: test 2s steps(10) infinite;
}
@keyframes test {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
1
2
3
4
5
6
7
8
9
10
11

animation-play-state 控制动画的状态

animation-play-state，顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一

• 它的取值只有两个（默认为 running）:animation-play-state: paused | running;

• 使用起来也非常简单，看下面这个例子，我们在 hover 按钮的时候，实现动画的暂停：

.box {
  width: 100px;
  height: 100px;
  background: deeppink;
  animation: test 2s linear infinite alternate;
}

@keyframes test {
  100% {
    transform: translate(100px, 0);
  }
}

.stop:hover ~ .box {
  animation-play-state: paused;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

animation-fill-mode 控制元素在各个阶段的状态

• animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式
  • forwards - 元素在动画开始之前的样式为 CSS 规则设定的样式，而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值（也就是停在最后一帧）
  • backwards - 元素在动画开始之前（包含未触发动画阶段及 animation-delay 期间）的样式为动画运行时的第一帧，而动画结束后的样式则恢复为 CSS 规则设定的样式
  • both - 综合了 animation-fill-mode: backwards 和 animation-fill-mode: forwards 的设定。动画开始前的样式为动画运行时的第一帧，动画结束后停在最后一帧

animation-iteration-count/animation-direction 动画循环次数和方向

• animation-iteration-count 控制动画运行的次数，可以是数字或者 infinite，注意，数字可以是小数

• animation-direction 控制动画的方向，正向、反向、正向交替与反向交替

• 在上面讲述 animation-fill-mode 时，我使用了动画运行时的第一帧替代了@keyframes 中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向 animation-direction 和 animation-iteration-count 的影响

• 在 CSS 动画中，由 animation-iteration-count 和 animation-direction 共同决定动画运行时的第一帧和最后一帧的状态

  • 动画运行的第一帧由 animation-direction 决定
  • 动画运行的最后一帧由 animation-iteration-count 和 animation-direction 决定

.box {
  animation: test 4s linear;
  animation-play-state: paused;
  transform: translate(0, 0);
}
@keyframes test {
  0% {
    transform: translate(100px, 0);
  }
  100% {
    transform: translate(300px, 0);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• 元素没有设置位移 transform: translate(0, 0)，而在动画中，第一个关键帧和最后一个关键的 translateX 分别是 100px、300px，配合不同 animation-direction 初始状态如下

  • 不设置 animation 的情况下 – 初始状态为 transform：translate(0,0)
  • 设置 animation-fill-mode：backwards；animation-direction：normal；的情况下，初始状态为@keyframes 中的 transform：translate(100px,0)
  • 设置 animation-fill-mode：backwards；animation-direction：reverse；的情况下，初始状态为@keyframes 中的 transform：translate(300px,0)

动画的分治与复用

这里我们实现了一个 div 块下落动画，下落的同时产生透明度的变化：

div {
  width: 100px;
  height: 100px;
  background: #000;
  animation: combine 2s;
}
@keyframes combine {
  100% {
    transform: translate(0, 150px);
    opacity: 0;
  }
}

/* or */

div {
  animation: falldown 2s, fadeIn 2s;
}

@keyframes falldown {
  100% {
    transform: translate(0, 150px);
  }
}
@keyframes fadeIn {
  100% {
    opacity: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• 在 CSS 动画规则中，animation 是可以接收多个动画的，这样做的目的不仅仅只是为了复用，同时也是为了分治，我们对每一个属性层面的动画能够有着更为精确的控制