[譯]A Simple CSS Animation Tutorial

原文: A Simple CSS Animation Tutorial

看到這篇文章描述簡單易懂，適合初學者，於是乎就想著記錄和分享一下。

---

（正文）

以將黃色方塊轉變為藍綠色圓型作為一個開始。

上圖是來自於 CSS Visual Dictionary

在上述程式碼中.animateClass被賦給一個元素,動畫隨即起效。這個class連結到animationName上，animationName需要設定@keyframes規則。這則動畫設定在3秒或者3000毫秒之間。 Note: 中間過程新增的特點的動畫-提供了一個曲線來描述在特定時間節點上動畫的相對速度。 在接下來的內容中我們將覆蓋釋放過程和其他一些CSS動畫屬性。

動畫是如何工作的

你可以運用動畫在任何那些物理位置、維度、角度或者顏色可以變化的CSS屬性上。使用關鍵幀（keyframes）實現基本動畫非常簡單。

CSS動畫關鍵幀是使用@keyframes關鍵字指定的。關鍵幀讓元素的狀態維持在動畫時間線的點上。

CSS動畫引擎會自動的在關鍵幀之間進行插值。你所需要知道的只是設定動畫起始和終點的CSS屬性。然後用@keyframes animationName{...}建立一個特定名字的動畫。

最後，建立一個特定的class來定義你的動畫duration/direction/repeatability/ easing type...，連結到@keyframes上。下面將視覺化這個過程。

CSS動畫屬性

8個獨立的動畫屬性速記：

• animation-name:
• animation-duration
• animation-timing-function
• animation-delay: 動畫開始前的延遲
• animation-iteration-count: 動畫出現的次數
• animation-direction: forwards/backwards/ alternate sequence
• animation-fill-mode: state of the animation when it is not playing
• animation-play-state: specify whether animation is running or is paused

animation-name

.animationClass {
    animation-name: animationName;
    animation-fill-mode: normal;
    animation: normal 3000ms easa-in;
}

@keyframes animationName {
    0%{}
    100%{}
}
複製程式碼

animation-duration

通常想先設定動畫的長度。正如下圖所示可以設定duration單位為秒或者毫秒。

也可以在動畫開始前設定一個延遲。

animation-direction

動畫方向可以設定normal/reverse/alternate/alternate-reverse

animation-iteration-count

可以看到明顯的問題是動畫將跳轉回第一幀。可以使用其他的一些動畫屬性來確保不會發生這種跳轉。可以設定動畫來迴圈，或者根據特定的UI動態調整其他屬性。通過這種方式，你可以之設計動畫的一半，並調整屬性來向前或者向後播放動畫，比如在滑鼠進入和退出事件上。

animation-timing-function

Easing由animation-timing-function指定，能為動畫增添個性。這是通過調整動畫在時間線上任意給定點的速度來實現的。起始點、中間點和終點特別關鍵，每個Easing型別都是由貝塞爾曲線定義的。

animation-fill-mode

none/forwards/backwards/both

animation-play-state

paused/running

Forward& Inverse Kinematics

... 待完善