綠島之北

翻譯文章，翻譯不好，還望大家指出

原文地址：How I Animated the bitsofcode Logo with CSS

我是css動(dòng)畫的新手，這樣說是因?yàn)槲抑辉谟邢薜陌咐惺褂眠^他們，而且大多時(shí)候通過使用第三方動(dòng)畫庫來完成，例如Daniel Eden寫的Animate.css

正如我在重新設(shè)計(jì)bitsofcode中提到的，我與新的bitsofcode logo的圖形設(shè)計(jì)師一起創(chuàng)建了這個(gè)動(dòng)畫。

我知道我肯定會(huì)在一些地方用到它，所以我決定嘗試重新創(chuàng)建動(dòng)畫的一部分作為純CSS動(dòng)畫。

CSS動(dòng)畫介紹

在介紹如何創(chuàng)建logo動(dòng)畫之前，對CSS動(dòng)畫如何工作的做點(diǎn)介紹有有幫助的。CSS動(dòng)畫讓我們創(chuàng)建自定義的、應(yīng)用在元素上的復(fù)雜動(dòng)畫稱為可能，而這不需要額外的工具或語言比如JavaScript。這有很多的好處，比如使用上更加簡單、比其他方式有更好的性能。

創(chuàng)建動(dòng)畫

為了創(chuàng)建CSS動(dòng)畫，我們要使用@keyframes規(guī)則，通過該規(guī)則來定義動(dòng)畫名稱以及應(yīng)用在動(dòng)畫元素上的每一步的CSS樣式。例如，下面的動(dòng)畫，命名為grow，將會(huì)縮放一個(gè)元素到它的尺寸的兩倍。

@keyframes grow {
    0% {
        transform: none;
    }
    100% {
        transform: scale(2);
    }
}

當(dāng)創(chuàng)建自定義動(dòng)畫的時(shí)候，動(dòng)畫名稱定義帶@keyframes關(guān)鍵字后面，并且動(dòng)畫的步驟定義在塊{}中。動(dòng)畫中的步驟可以被認(rèn)為是一個(gè)時(shí)間軸，從0開始，標(biāo)志動(dòng)畫的開始，到底100，標(biāo)志動(dòng)畫的結(jié)束。

除了時(shí)間軸上的這兩個(gè)點(diǎn)意外，在這之間還可以有許多類似的步驟。例如，調(diào)整grow動(dòng)畫從成長變成一個(gè)脈搏動(dòng)畫。現(xiàn)在我們不是簡單的讓元素?cái)U(kuò)大，同樣，我們也要讓它回到原始尺寸。

@keyframes pulse {
    0% {
        transform: none;
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: none;
    }
}

在時(shí)間軸上的一個(gè)點(diǎn)可以有多條規(guī)則，就像給一個(gè)選擇器應(yīng)用樣式。

@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;
    }
}

使用動(dòng)畫

一旦我們創(chuàng)建好了動(dòng)畫，我們就可以把它用到任何含有animation屬性的元素上了。關(guān)于CSS動(dòng)畫animation，這里有九條相關(guān)規(guī)則。

例如，我們可以應(yīng)用pulseAndChangeColour動(dòng)畫3秒、無限循環(huán)、支持動(dòng)畫反向運(yùn)行、播放前有2秒的延遲時(shí)間，這些聲明如下：

.animated-element {
    animation-name: pulseAndChangeColour;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 2s;
}

兼容性

動(dòng)畫bitsofcode Logo

在我的CSS動(dòng)畫中，我決定重新創(chuàng)建之前創(chuàng)建的一部分，以下是我需要?jiǎng)?chuàng)建的部分：

預(yù)備SVG元素

正如你想象，該logo是一個(gè)SVG元素。每一個(gè)字符（除了字母'o'，取一半）都是一個(gè)獨(dú)立的<path>。這可以讓我瞄準(zhǔn)每一個(gè)獨(dú)立的字母或者瞄準(zhǔn)具體的一組字符。

基于動(dòng)畫，有三個(gè)可以看到的字幕組，我使用三個(gè)類組合起來：

• .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，就像))

對上述的每一個(gè)組都對應(yīng)一個(gè)單獨(dú)的@keyframes規(guī)則，因?yàn)樗鼈冎械膭?dòng)畫略微不同。

創(chuàng)建時(shí)間軸

正如我提到的，每一個(gè)CSS動(dòng)畫都有一個(gè)時(shí)間事件軸，從0%到100%。因?yàn)檫@個(gè)動(dòng)畫要比脈動(dòng)動(dòng)畫復(fù)雜，所以這里我特地在寫CSS之前寫出時(shí)間軸，這很有用。

讓我們先對logo左邊的部分進(jìn)行動(dòng)畫，一下是基本的步驟：

• 向左移動(dòng)
• 回到中間
• 停留在中間（等待右邊部分向右移動(dòng)）
• 向左移動(dòng)
• 旋轉(zhuǎn)
• 慢慢增加旋轉(zhuǎn)
• 回到?jīng)]有旋轉(zhuǎn)的位置
• 回到中間

接下來，我將采取這些步驟并把這些步驟對應(yīng)到時(shí)間軸上，從0到100%，每一步都要標(biāo)記上。

這可以被翻譯成真正的CSS動(dòng)畫時(shí)間軸：

@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 */
  }
}

對每一步都寫樣式

一旦時(shí)間軸被規(guī)劃出來，我就可以對每一步增加CSS樣式了。對于這個(gè)動(dòng)畫，我使用的唯一屬性是具有translate()和rotate()函數(shù)的transform屬性。

這是左邊部分完整的動(dòng)畫幀：

@keyframes logoSectionLeft {
  0% {
    /* 初始位置 */
    transform: none;
  }

  12.5% {
    /* 1. 向左移動(dòng) */
    transform: translateX(-15px);
  }

  25%,
  50% {
    /* 2. 回到中間 */
    /* 3. 停留在中間 等待右邊部分向右移動(dòng)) */
    transform: none;
  }

  62.5% {
    /* 4. 向左移動(dòng) */
    transform: translateX(-15px);
  }

  67%,
  72% {
    /* 5. 旋轉(zhuǎn) */
    transform: translateX(-15px) rotate(-10deg);
  }

  82% {
    /* 6. 緩慢增加旋轉(zhuǎn) */
    transform: translateX(-15px) rotate(-15deg);
  }

  87.5% {
    /* 7. 回到?jīng)]有旋轉(zhuǎn)的位置 */
    transform: translateX(-15px);
  }

  100% {
    /* 7. 回到中間 */
    transform: none;
  }
}

應(yīng)用動(dòng)畫

最后，我想要當(dāng)logo被focus或hover的時(shí)候才應(yīng)用動(dòng)畫。并且運(yùn)行3秒、無限循環(huán)運(yùn)行。

.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;
}

就到這吧，我把動(dòng)畫放到了CodePen，你可以進(jìn)行體驗(yàn)。