Transition 屬性（過渡動畫）

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

一、前言

之前有段時間總是混淆 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

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

---

二、庖丁解牛

語法： 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>) ]*

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

liner 勻速 cubic-bezier(0, 0, 1, 1)

ease 平滑過渡 cubic-bezier(0.25, 0.1, 0.25, 1)

ease-in 加速 cubic-bezier(0.42, 0, 1, 1)

ease-out 減速 cubic-bezier(0, 0, 0.58, 1)

ease-in-out 先加速后減速 cubic-bezier(0.42, 0, 0.58, 1)

cubic-bezier(n, n, n, n) 自定義一個貝瑟爾曲線，取值范圍 [0, 1]。貝瑟爾曲線是什么？

2.4 transiton-delay （延遲時間）

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

規定過渡動畫延遲發生的時間。（單位為：秒或者毫秒）可以作用于所有元素，包括 :before 和 :after 偽元素。

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

---

三、小試牛刀

寫了一個小 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'; } 復制代碼 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的CSS3动画属性之Transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。