transition:過渡

transform:變換

translate:平移

animation:動(dòng)畫

transition定義及用法

transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過渡屬性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

注釋：請(qǐng)始終設(shè)置?transition-duration?屬性，否則時(shí)長為 0，就不會(huì)產(chǎn)生過渡效果。

默認(rèn)值：繼承性：版本：

all 0 ease 0

no

CSS3

語法

transition: property duration timing-function delay; 值描述

transition-property	規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration	規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function	規(guī)定速度效果的速度曲線。
transition-delay	定義過渡效果何時(shí)開始。

transform定義及用法

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
為了更好地理解 transform 屬性，請(qǐng)查看這個(gè)演示。
默認(rèn)值： none
繼承性： no
版本： CSS3

語法

transform: none|transform-functions; 值描述測(cè)試

none	定義不進(jìn)行轉(zhuǎn)換。	測(cè)試
matrix(n,n,n,n,n,n)	定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。	測(cè)試
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。
translate(x,y)	定義 2D 轉(zhuǎn)換。	測(cè)試
translate3d(x,y,z)	定義 3D 轉(zhuǎn)換。
translateX(x)	定義轉(zhuǎn)換，只是用 X 軸的值。	測(cè)試
translateY(y)	定義轉(zhuǎn)換，只是用 Y 軸的值。	測(cè)試
translateZ(z)	定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉(zhuǎn)換。	測(cè)試
scale3d(x,y,z)	定義 3D 縮放轉(zhuǎn)換。
scaleX(x)	通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。	測(cè)試
scaleY(y)	通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。	測(cè)試
scaleZ(z)	通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。
rotate(angle)	定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。	測(cè)試
rotate3d(x,y,z,angle)	定義 3D 旋轉(zhuǎn)。
rotateX(angle)	定義沿著 X 軸的 3D 旋轉(zhuǎn)。	測(cè)試
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉(zhuǎn)。	測(cè)試
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉(zhuǎn)。	測(cè)試
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。	測(cè)試
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。	測(cè)試
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。	測(cè)試
perspective(n)	為 3D 轉(zhuǎn)換元素定義透視視圖。	測(cè)試

animation定義及用法

animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注釋：請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長為 0，就不會(huì)播放動(dòng)畫了。

默認(rèn)值：繼承性：版本：

none 0 ease 0 1 normal

no

CSS3

語法

animation: name duration timing-function delay iteration-count direction; 值描述

animation-name	規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-timing-function	規(guī)定動(dòng)畫的速度曲線。
animation-delay	規(guī)定在動(dòng)畫開始之前的延遲。
animation-iteration-count	規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction	規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

過渡效果演示：http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-3.html

總結(jié)

以上是生活随笔為你收集整理的CSS之transition, transform, tanslate,animation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。