動畫--過渡函數 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
(單擊圖片可放大)
案例展示：
在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函數。
HTML代碼:
<div></div>
CSS代碼:
div { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { border-radius: 100%; }
演示結果
鼠標移入：
鼠標移出：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變形與動畫</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div></div> </body> </html>
div { width: 200px; height: 200px; background-color: orange; margin: 20px auto; border-radius: 100%; -webkit-transition-property: -webkit-border-radius,background-color; transition-property: border-radius,background-color; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } div:hover { border-radius: 0px; background-color:red; }