CSS3動畫屬性之Transition

Transition 屬性（過渡動畫）

Transition 屬性是能夠讓元素從一個狀態轉換成另外一個狀態，這就是過渡。

1、前言

以前有段時間老是混淆 transition 和 transform 屬性的用法，這裏有個方法，可供參考。 先說 transform，trans在英語詞根中表示變化、運動，而 form 在英語詞根中自己就是形狀、形式的意思，那就不難理解 transform 是讓形狀變化起來了，因而它就是形狀變換。 至於 transition，去查一下它的英語解釋就一目瞭然了。這裏是必應詞典的解釋：

a process or period in which something undergoes a change and passes from one state, stage, form, or activity to another

簡單點說，就是經歷了從一個狀態、階段、形式轉換到另外一個狀態的一個過程或者一段時間。那麼這樣一個**「須要時間來轉換的過程」**，不就描述了「過渡」二字的含義嗎？

---

2、庖丁解牛

語法： transiton: transiton-property transiton-duration transiton-timing-function transiton-delay;

2.1 transiton-property （特性）

transition-property：all | none | <property> [ ,<property> ]*

規定設置過渡效果的 CSS 屬性的名稱。

all 爲默認值，表示全部能夠呈現動效的屬性都去產生過渡動畫。

none 表示沒有過渡動畫。

下表是能夠產生動效的一些CSS屬性值：

CSS屬性名稱	類型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

2.2 transiton-duration （延續時間）

transition-duration：<time> [ , <time> ]*

規定完成過渡動畫的延續時長。（單位爲：秒或者毫秒）能夠做用於全部元素，包括 :before 和 :after 僞元素。

默認值爲 0，表示不產生過渡動效，而是即刻完成動畫。

2.3 transiton-timing-function （速率變化函數）

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

規定過渡效果的速度曲線，過渡屬性將隨着時間的變化來改變其速度。

1. liner 勻速 cubic-bezier(0, 0, 1, 1)
2. ease 平滑過渡 cubic-bezier(0.25, 0.1, 0.25, 1)
3. ease-in 加速 cubic-bezier(0.42, 0, 1, 1)
4. ease-out 減速 cubic-bezier(0, 0, 0.58, 1)
5. ease-in-out 先加速後減速 cubic-bezier(0.42, 0, 0.58, 1)
6. cubic-bezier(n, n, n, n) 自定義一個貝瑟爾曲線，取值範圍 [0, 1]。貝瑟爾曲線是什麼？

2.4 transiton-delay （延遲時間）

transition-delay：<time> [ , <time> ]*

規定過渡動畫延遲發生的時間。（單位爲：秒或者毫秒）能夠做用於全部元素，包括 :before 和 :after 僞元素。

默認值爲 0，表示過渡動效即刻執行，沒有延遲。

---

3、小試牛刀

寫了一個小 demo，感覺一下過渡動畫的魅力。

html代碼：

<h1 style="text-align:center;">小試牛刀</h1>
<div class="container">
    <button class="btn">開始</button>
    <br> <br>
    <div class="box">過渡</div>
</div>
複製代碼

css代碼：

* {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    left: 50%;
    top: 10px;
    transform: translate(-50%);
    width: 500px;
    height: 500px;
    border-radius: 20px;
    border: 3px solid salmon;
    overflow: hidden;
}
.box {
    margin-top: 30px;
    margin-left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border: 2px solid gold;
    background: #abcdef;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    /* 下面設置3個過渡動畫 經過點擊事件觸發*/
    transition: transform 2s ease 0.5s, backgroundColor 2s linear, height 1.5s ease-in-out, width 1.5s ease-in-out;
}
.btn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10px);
    border-radius: 10px;
    border: 0;
    outline: 0;
    padding: 10px;
}
複製代碼

js代碼：

var oBtn = document.getElementsByClassName('btn')[0];
var oBox = document.getElementsByClassName('box')[0];

oBtn.onclick = function() {
    oBox.style.transform = 'translate(220px,220px) rotate(720deg)'
    oBox.style.backgroundColor = 'pink';
    oBox.style.width = '200px';
    oBox.style.height = '150px';
}
複製代碼