HTML5權威指南筆記：23-過渡、動畫和變換

1 使用過渡

屬性	說明	值
transition-delay	指定過渡開始之前的延遲時間	＜時間＞
transition-duration	指定過渡的持續時間	＜時間＞
transition-property	指定應用過渡的屬性	＜字符串＞
transition-timing-function	指定過渡期間計算中間值的方式	見1.2
transition	在一條聲明中指定所有過渡細節的簡寫屬性	見下

transition簡寫屬性的格式如下：

transition: <transition-property> <transition-duration> <transition-timing-function><transition-delay>

例子中所有的-webkit-爲廠商前綴。

例子：

/*應用在鼠標移動到元素上時觸發*/
:hover {
    color: white;/*變換的屬性*/

    /*定義過渡*/
    -webkit-transition-delay: 100ms;
    -webkit-transition-property: background-color, color, padding, font-size, border;
    -webkit-transition-duration: 500ms;
}

1.1 創建反向過渡

在應用過渡後重新回到初始狀態
例子：

/*在初始屬性中添加過渡，使可以重回這個狀態*/
#banana {
    border: medium solid black;/*初始屬性*/

    /*定義過渡*/
    -webkit-transition-delay: 10ms;
    -webkit-transition-duration: 250ms;
}

#banana :hover {
    color: white;/*過渡後屬性*/

    /*定義過渡*/
    -webkit-transition-delay: 100ms;
    -webkit-transition-property: background-color, color, padding, font-size, border;
    -webkit-transition-duration: 500ms;
}

1.2 選擇中間值的計算方式

transition-timing-function屬性的值：ease（默認）、linear、ease-in、ease-out、ease-in-out。
這些值值表示爲四個點控制的三次貝塞爾曲線。如下圖：
例子：

-webkit-transition-timing-function: linear;

2 使用動畫

屬性	說明	值
animation-delay	設置動畫開始前的延遲	＜時間＞
animation-direction	設置動畫循環播放的時候是否反向播放	normal alternate
animation-duration	設置動畫播放的持續時間	＜時間＞
animation-iteration-count	設置動畫的播放次數	infinite ＜數值＞
animation-name	指定動畫名稱	none ＜字符串＞
animation-play-state	允許動畫暫停和重新播放	running paused
animation-timing-function	指定如何計算中間動畫值，關於這個值的細節參見1節	ease linear ease-in ease-out ease-in-out cubic-bezier
animation	簡寫屬性	見下面

animation簡寫屬性的格式如下：

animation: <animation-name> <animation-duration> <animation-timing-function><animation-delay> <animation-iteration-count>

例子：

/*定義了動畫的樣式*/
#banana:hover {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
/*keyframes定義應用動畫的屬性*/
@-webkit-keyframes GrowShrink {
    to {
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: white;
        padding: 4px;
    }
}

2.1 使用關鍵幀

例子：設置初始狀態

@-webkit-keyframes GrowShrink {
    /*使用from子句指定一組初始值*/
    from {
        font-size: xx-small;
        background-color: red;
    }

    to {
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: white;
        padding: 4px;
    }
}

例子：指定中間關鍵幀

@-webkit-keyframes GrowShrink {
    from {
        padding: 1px;
    }
    /*在動畫到百分之50和75處添加中間的關鍵幀，是樣式改變*/
    50% {
        padding: 2px;
    }

    75% {
        padding: 3px;
    }

    to {
        padding: 4px;
    }
}

2.2 設置重複方向

animation-direction屬性的值：
normal：每次重複都向前播放， 如果可重複播放多次，每次動畫都恢復初始狀態， 從頭開始播放。
alternate：動畫先向前播放， 然後反方向播放，相當於animation-iteration-count屬性的值爲2。

例子：

animation-direction: alternate;

2.3 理解結束狀態

動畫結束後會回到初始狀態，如果想一直停留在結束狀態，那麼可以使用過渡。

2.4 初始佈局時應用動畫

就是直接不使用鼠標的什麼事件比如:hover，這樣就會在頁面加載後自動開始動畫。

例子：

/*定義了動畫的樣式*/
#banana {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
/*定義應用動畫的屬性*/
@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

2.5 重用關鍵幀

例子：

/*兩個樣式#banana、#apple同用一個動畫*/
#banana {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}

@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

2.6 爲多個元素應用多個動畫

例子：爲多個元素應用一個動畫

/*用,號使多個元素應用同一個動畫*/
#banana,#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}

@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

例子：爲一個元素應用多個關鍵幀

#banana,#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    /*用,號使同一個元素應用多個動畫*/
    -webkit-animation-name: 'GrowShrink1','GrowShrink2';
}

@-webkit-keyframes GrowShrink1 {
    to {
        padding: 4px;
    }
}
@-webkit-keyframes GrowShrink2 {
    to {
        padding: 2px;
    }
}

2.7 停止和啓動動畫

animation-play-state屬性可以用來停止和啓動動畫。如果這個屬性的值爲paused, 動畫就會停止。如果換成playing , 動畫就會開始播放。
例子：使用js控制動畫

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #fruittext {
            padding: 5px;
            border: medium double black;
            background-color: lightgrey;
            font-family: sans-serif;
        }

        #banana {
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'GrowShrink';
        }

        @-webkit-keyframes GrowShrink {
            from {
                font-size: large;
                border: medium solid black;
            }

            to {
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
    </style>
</head>
<body>
    <p id="fruittext">
        There are lots of different kinds of fruit - there are over 500
        varieties of <span id="banana">banana</span> alone. By the time we add the
        countless types of apples, oranges, and other
        well-known fruit, we are faced with thousands of choices.
    </p>
    <p>
        <button>Running</button>
        <button>Paused</button>
    </p>
    <script>
        var buttons = document.getElementsByTagName("BUTTON");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function (e) {
                document.getElementById("banana").style.webkitAnimationPlayState =
                    e.target.innerHTML;
            };
        }
    </script>
</body>
</html>

3 使用變換

屬性	說明	值
transform	指定應用的變換功能	見3.1
transform-origin	指定變換的起點	見3.2

3.1 應用變換

transform屬性的值：

值	說明
translate(<長度值或百分數值＞） translateX(<長度值或百分數值＞） translateY(< 長度值或百分數值＞）	在水平方向、垂直方向或者兩個方向上平移元素
scale(<數值＞） scaleX(<數值＞） scaleY(<數值＞）	在水平方向、垂直方向或者兩個方向上縮放元素
rotate(<角度＞）	旋轉元素
skew(< 角度） skewX(<角度＞） skewY(<角度＞）	在水平方向、垂直方向或者兩個方向上使元素傾斜一定的角度
matrix(4~6個數值，逗號隔開）	指定自定義變換。大多數瀏覽器還沒有實現z軸縮放，因此最後兩個數字可以忽略（有些情況必須要省略）

例子：

-moz-transform: rotate(-45deg) scaleX(1.2); 

3.2 指定元素變換的起點

transform-origin屬性的值：

值	說明
<%>	指定元素x軸或者y軸的起點
＜長度值＞	指定距離
left center Right	指定x軸上的位置
top center bottom	指定y軸上的位置

例子：

/*要定義起點， 需要爲x軸和沛h各定義一個值。如果只提供一個值，另一個值會被認爲是中心位置。*/
-moz-transform-origin: right top;

3.3 將變換作爲動畫和過渡處理

例子：

/*經過1.5秒鐘完成一次360° 旋轉變換*/
#banana:hover {
    -moz-transition-duration: 1.5s;
    -moz-transform: rotate(360deg);
}