【翻译】我如何使用CSS来制作bitsofcode Logo动画
翻译文章，翻译不好，还望大家指出
原文地址：How I Animated the bitsofcode Logo with CSS
我是css动画的新手，这样说是因为我只在有限的案例中使用过他们，而且大多时候通过使用第三方动画库来完成，例如Daniel Eden写的Animate.css
正如我在重新设计bitsofcode中提到的，我与新的bitsofcode logo的图形设计师一起创建了这个动画。
我知道我肯定会在一些地方用到它，所以我决定尝试重新创建动画的一部分作为纯CSS动画。
CSS动画介绍
在介绍如何创建logo动画之前，对CSS动画如何工作的做点介绍有有帮助的。CSS动画让我们创建自定义的、应用在元素上的复杂动画称为可能，而这不需要额外的工具或语言比如JavaScript。这有很多的好处，比如使用上更加简单、比其他方式有更好的性能。
创建动画
为了创建CSS动画，我们要使用@keyframes规则，通过该规则来定义动画名称以及应用在动画元素上的每一步的CSS样式。例如，下面的动画，命名为grow，将会缩放一个元素到它的尺寸的两倍。
@keyframes grow {
0% {
transform: none;
}
100% {
transform: scale(2);
}
}
当创建自定义动画的时候，动画名称定义带@keyframes关键字后面，并且动画的步骤定义在块{}中。动画中的步骤可以被认为是一个时间轴，从0开始，标志动画的开始，到底100，标志动画的结束。
除了时间轴上的这两个点意外，在这之间还可以有许多类似的步骤。例如，调整grow动画从成长变成一个脉搏动画。现在我们不是简单的让元素扩大，同样，我们也要让它回到原始尺寸。
@keyframes pulse {
0% {
transform: none;
}
50% {
transform: scale(2);
}
100% {
transform: none;
}
}
在时间轴上的一个点可以有多条规则，就像给一个选择器应用样式。
@keyframes pulseAndChangeColour {
0% {
transform: none;
background-color: red;
}
25% {
background-color: blue;
}
50% {
transform: scale(2);
background-color: green;
}
75% {
background-color: pink;
}
100% {
transform: none;
background-color: orange;
}
}
使用动画
一旦我们创建好了动画，我们就可以把它用到任何含有animation属性的元素上了。关于CSS动画animation，这里有九条相关规则。
| Property | Description |
|---|---|
| animation-name | 定义动画名称，在@keyframes中定义 |
| animation-delay | 定义在动画开始前的延迟时间 |
| animation-duration | 定义动画一个周期内需要的时间 |
| animation-iteration-count | 定义动画在播放的次数 |
| animation-direction | 定义在时间轴上朝哪个方向运行 |
| animation-play-state | 决定动画是运行还是暂停 "paused" or "running" |
| animation-timing-function | 定义动画在每个步骤如何过渡 |
| animation-fill-mode | 动画在播放前或后，动画效果是否可见 |
| animation | 以上所有属性的缩写 |
例如，我们可以应用pulseAndChangeColour动画3秒、无限循环、支持动画反向运行、播放前有2秒的延迟时间，这些声明如下：
.animated-element {
animation-name: pulseAndChangeColour;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 2s;
}
兼容性
动画bitsofcode Logo
在我的CSS动画中，我决定重新创建之前创建的一部分，以下是我需要创建的部分：
预备SVG元素
正如你想象，该logo是一个SVG元素。每一个字符（除了字母'o'，取一半）都是一个独立的<path>。这可以让我瞄准每一个独立的字母或者瞄准具体的一组字符。
基于动画，有三个可以看到的字幕组，我使用三个类组合起来：
- .logo-section—left: 字母组 "bitso" (with the opening o，就像
() - .logo-section—middle: 字母组 "ofco" (with the closing o and opening o，就像
)() - .logo-section—right: 字母组 "ode" (with the closing o，就像
))
对上述的每一个组都对应一个单独的@keyframes规则，因为它们中的动画略微不同。
创建时间轴
正如我提到的，每一个CSS动画都有一个时间事件轴，从0%到100%。因为这个动画要比脉动动画复杂，所以这里我特地在写CSS之前写出时间轴，这很有用。
让我们先对logo左边的部分进行动画，一下是基本的步骤：
- 向左移动
- 回到中间
- 停留在中间（等待右边部分向右移动）
- 向左移动
- 旋转
- 慢慢增加旋转
- 回到没有旋转的位置
- 回到中间
接下来，我将采取这些步骤并把这些步骤对应到时间轴上，从0到100%，每一步都要标记上。
这可以被翻译成真正的CSS动画时间轴：
@keyframes logoSectionLeft {
0% {
/* Initial Position */
}
12.5% {
/* 1. Move Left */
}
25% {
/* 2. Return to middle */
}
50% {
/* 3. Stay in middle (while waiting for the right section to move right) */
}
62.5% {
/* 4. Move left */
}
67%,
72% {
/* 5. Rotate */
}
82% {
/* 6. Slowly increase rotation */
}
87.5% {
/* 7. Return to unrotated position */
}
100% {
/* 8. Return to middle */
}
}
对每一步都写样式
一旦时间轴被规划出来，我就可以对每一步增加CSS样式了。对于这个动画，我使用的唯一属性是具有translate()和rotate()函数的transform属性。
这是左边部分完整的动画帧：
@keyframes logoSectionLeft {
0% {
/* 初始位置 */
transform: none;
}
12.5% {
/* 1. 向左移动 */
transform: translateX(-15px);
}
25%,
50% {
/* 2. 回到中间 */
/* 3. 停留在中间 等待右边部分向右移动) */
transform: none;
}
62.5% {
/* 4. 向左移动 */
transform: translateX(-15px);
}
67%,
72% {
/* 5. 旋转 */
transform: translateX(-15px) rotate(-10deg);
}
82% {
/* 6. 缓慢增加旋转 */
transform: translateX(-15px) rotate(-15deg);
}
87.5% {
/* 7. 回到没有旋转的位置 */
transform: translateX(-15px);
}
100% {
/* 7. 回到中间 */
transform: none;
}
}
应用动画
最后，我想要当logo被focus或hover的时候才应用动画。并且运行3秒、无限循环运行。
.site__title a:hover .logo-section-left,
.site__title a:focus .logo-section-left {
animation-name: logoSectionLeft;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
就到这吧，我把动画放到了CodePen，你可以进行体验。
