css 动画和关键帧: animation 和 @keyframe

不同于过渡效果，使用关键帧配合动画属性能精细控制元素的动画在多个状态之间相互变化

定义关键帧动画

要使用动画属性，我们先定义一组动画：

@keyframes animationName {
  from { /* CSS 属性: 值; */ } /* 动画开始时的状态 (等同于 0%) */
  to   { /* CSS 属性: 值; */ } /* 动画结束时的状态 (等同于 100%) */
}

/* 或者使用百分比来定义中间状态 */
@keyframes animationName {
  0%   { /* CSS 属性: 值; */ }
  50%  { /* CSS 属性: 值; */ }
  100% { /* CSS 属性: 值; */ }
}

其中的百分比是相对于动画的总时间而言的。

如果开始时候的状态和之前定义的元素的状态或者默认状态相同，那么开始的状态（也就是 from {} 和 0% {} 可以省略。

应用关键帧动画

语法

animation 属性是一个简写属性，用于一次性设置所有动画相关的子属性。它将 @keyframes 定义的动画应用到元素上。

1
2
3

selector {
  animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
}

下面这些属性先后顺序没有说法，必选的值是动画名称和动画持续时间，例如：

1	animation: run 0.3s;

可以使用复合属性语法同时应用多组动画：

animation:
  动画一,
  动画二,
  ... ...
;

最后一个动画后无需加冒号。

解释

animation-name:
- 指定要应用的 @keyframes 规则的名称。
- 示例: animation-name: moveAndColor;
animation-duration:
- 指定动画完成一个周期所需的时间。
- 单位：秒 (s) 或毫秒 (ms)。
- 示例: animation-duration: 3s; (动画持续3秒)
animation-timing-function:
- 定义动画的速度曲线，即动画如何随时间变化。
- 常用值:
  - linear: 匀速。
  - steps(数字)：制作逐帧动画，可以配合精灵图使用。数字表示将动画拆成几帧。
  - ease: 慢速开始，然后加速，然后慢速结束 (默认值)。
  - ease-in: 慢速开始。
  - ease-out: 慢速结束。
  - ease-in-out: 慢速开始和结束。
  - cubic-bezier(n,n,n,n): 自定义速度曲线。
- 示例: animation-timing-function: ease-in-out;
animation-delay:
- 指定动画在应用到元素后，延迟多久开始播放。
- 单位：秒 (s) 或毫秒 (ms)。
- 示例: animation-delay: 1s; (延迟1秒后开始动画)
animation-iteration-count:
- 指定动画播放的次数。
- 值:
  - 数字 (如 1, 3)。
  - infinite: 无限次播放。
- 示例: animation-iteration-count: infinite;
animation-direction:
- 指定动画是否应该轮流反向播放。
- 值:
  - normal: 正常播放 (默认值)。
  - reverse: 反向播放。
  - alternate: 动画在奇数次正向播放，偶数次反向播放。通过这个，能制作出来回播放的感觉。
  - alternate-reverse: 动画在奇数次反向播放，偶数次正向播放。
- 示例: animation-direction: alternate;
animation-fill-mode:
- 定义动画在播放之前和之后如何将样式应用于其目标。
- 值:
  - none: 动画在播放前后不对元素应用任何样式 (默认值)。动画结束后，元素将恢复到其原始状态。
  - forwards: 动画结束后，元素将保持动画最后一帧的样式。
  - backwards: 动画开始前（即 animation-delay 期间），元素将应用动画第一帧的样式。
  - both: 同时应用 forwards 和 backwards 的规则。
- 示例: animation-fill-mode: forwards;
animation-play-state:
- 允许你暂停或继续播放动画。
- 值:
  - running: 动画正在播放 (默认值)。
  - paused: 动画已暂停。
- 通常通过 JavaScript 或者 hover 伪类来控制这个属性，例如在鼠标悬停时暂停动画。
- 示例: animation-play-state: paused;

实战技巧

无缝动画

有时候要制作走马灯那种首尾相接的动画，其核心在于

复制开头图片到结尾位置（需要复制的图片累加宽度 = 区域宽度）

比如这张图中累加的宽度正好是 3 张，咱就复制三张到结尾就行。

之后只要让动画循环播放即可

精灵图动画

制作步骤

准备显示区域

盒子尺寸与一张精灵小图尺寸相同

定义动画

移动背景图（移动距离 = 精灵图宽度）

使用动画

animation-timing-function 设置为 steps(N)，N 与精灵小图个数相同。

Leaves' blog