轉場特效 CSS3 Transition

以往 HTML 元素外觀的轉換只能從一種外觀直接跳到另一種外觀，使用者無法感受到中間平滑的轉換。

而 Transition 屬性幫我們補足中間的過場動畫。

屬性	說明
transition	縮寫可分別放入 transition 的四個屬性，預設是 all
transition-property	指定 transition 效果要控制的屬性 - CSS animated properties
transition-duration	指定多少時間完成 transition 效果
transition-timing-function	制定 transition 的速度效果
transition-delay	指定 transition 延遲多久開始

若針對不同屬性同時做 transition 可使用，將屬性分隔開來。

.test {
    transition: height 1s, width 2s;
}

Transition 限制

開始和結束都必須是具體數值，以下就是無法被計算

height: auto 至 height: 100px;
display: none 至 display: block;
background: url(xxx.png) 至 background: url(yyy.png)

.test {
    height: auto;
}
.test:hover {
    height: 200px;
    transition: height 1s;
}

最後 transition 需要事情來觸發動作，所以沒辦法一進頁面自動產生效果。以不透過 JavaScript 事情為前提下，只能配合與事件有關的 Pseudo Classe (偽類別，:hover、:focus 等) 來呈現。

實務練習 - 價錢下方的醒目提示

image source: IBUYPOWER

JS Bin

Animation

transition 簡單易用，但也是有諸多限制，所以才有了這個 animation 屬性來彌補不足。

屬性	說明
animation	跟 transition 屬性一樣都是簡寫。以下屬性代表總和
animation-name	動畫名稱
animation-duration	播放一次動畫需要的時間
animation-timing-function	動畫的加速度曲線
animation-delay	延遲多久開始動畫
animation-iteration-count	播放次數
animation-direction	動畫播放方向
animation-fill-mode	指定動畫撥放前後的狀態
animation-play-state	指定動畫播放或暫停

基本應用

div:hover {
    animation: 1s resize;
}
p: hover {
    animation: 2s small;
}
@keyframes resize {
    0% { width: 100px; }
    50% { width: 200px; }
    100% { width: 300px; }
}
@keyframes small {
    from { width: 300px; }
    to { width: 50px; }
}