CSS3 Transition 與 Animation

CSS3 Transition

在給定的持續時間內平滑地更改屬性值（從一個值到另一個值），也就是只需指定開始與結束的參數，參數改變時就觸發動畫。

CSS3 transitions可以改變css屬性的值，在某個期間內做出變化，類似jQuery.animate()

語法結構如下：

.example {
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s; }

transition-property: 指定你要變化的CSS屬性

transition-duration: 指定transition從開始到結束的變化時間，在數字後面加上s就是以秒計算，用ms就是微秒

transition-timing-function: 根據時間的進行去改變屬性值的變化速率

transition-delay: 可以指定秒或微秒來延遲transition觸發的時間

簡潔的寫法：

.example { transition: background-color 2s ease-in 1s; }

如果想在同個元素上定義複數個transitions，可以用下面寫法：

.example {
transition: background-color 2s ease-in 1s, width 2s ease-in-out, height 3s ease-out; }

範例：

.example {
background-color: green; transition: background-color 2s ease-in 1s; width:100px; height:100px; }

.example:hover { background-color: blue }

CSS Animation

可以自行撰寫動畫 開始、進行間、結束時各階段的變化，適合用來做較細微的動畫表現。需要明確的指定關鍵影格(@keyframes)的參數。

@keyframes test {
0% {
...
}
100% {
...
}
}

animation-name 名稱

animation-name: test;

animation-duration 時間

animation-duration: 2s;

animation-timing-function

• inear: 平均速度
• ease: 快入緩出 (預設)
• ease-in: 緩入
• ease-out: 緩出
• ease-in-out: 緩入緩出
• cubic-bezier: 自定義速度模式

animation-delay 延遲

animation-iteration-count

0：代表該動畫並不會播放。
數整：表示該動畫的播放次數，例：2 即會播放兩次。
infinite：表示該動畫會播放無限多次。

animation-direction

• normal(正常播放)
• reverse (反向播放)
• alternate (正向撥放，再反向播放)
• alternate-reverse (反向撥放，再正向播放)

animation-fill-mode 

• none (回到最初未撥放狀態)
• forwards (停在最後一個狀態)
• backwards (停在第一個狀態)
• both (停留在 animation-direction 最後一個狀態)

animation-play-state 播放狀態

• running (預設播放)
• paused (暫停播放)

See the Pen
qBNaMbv by dorigo (@dorigowu)
on CodePen.