【翻译】我如何使用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，你可以进行体验。