transition:過渡

transform:變換

translate:平移

animation:動畫

transition定義及用法

transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：

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

注釋：請始終設置?transition-duration?屬性，否則時長為 0，就不會產生過渡效果。

默認值：繼承性：版本：

all 0 ease 0

no

CSS3

語法

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

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

transform定義及用法

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
為了更好地理解 transform 屬性，請查看這個演示。
默認值： none
繼承性： no
版本： CSS3

語法

transform: none|transform-functions; 值描述測試

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

animation定義及用法

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

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

注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

默認值：繼承性：版本：

none 0 ease 0 1 normal

no

CSS3

語法

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

animation-name	規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

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

總結

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

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