[譯]A Simple CSS Animation Tutorial

原文: A Simple CSS Animation Tutorial

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

---

（正文）

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

Animation

上圖是來自於 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類型都是由貝塞爾曲線定義的。

線性

ease

ease-in

ease-out

ease-in-out

特定的cubic Bezier曲線

兩個控制點

animation-fill-mode

none/forwards/backwards/both

animation-play-state

paused/running

Forward& Inverse Kinematics

... 待完善