CSS3 傻傻分不清楚的transition, transform 和 animation
-
transition
transition允許css的屬性值在一定的時間區間內平滑地過渡,語法如下:
transition : transition-property transition-duration transition-timing-function transition-delay [, ...]
- transition-property
用來指定執行transition效果的屬性,可以為none
,all
或者特定的屬性。 - transition-duration
動畫執行的持續時間,單位為s(秒)
或者ms(毫秒)
。 - transition-timing-function
變換速率效果,可選值為ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(自定義時間曲線)
- transition-delay
用來指定動畫開始執行的時間,取值同transition-duration
,但是可以為負數。
-
transform
transform 分為2D 和 3D,這裏暫時只介紹比較常用的2D transform,其主要包含以下幾種變換:旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix,語法如下:
transform: rotate | scale | skew | translate |matrix;
rotate 旋轉
rotate 的單位是deg 度
,正數表示順時針旋轉,負數表示逆時針旋轉。
scale 縮放
scale 的取值範圍是0~n
,小於1
時表示縮小,反之表示放大。例如scale(0.5, 2)
表示水平方向縮小1倍,垂直方向放大1倍, 另外,也可以通過scaleX
或者scaleY
對一個方向進行設置。
skew 扭曲
skew 的單位跟rotate
一樣都是deg 度
。例如 skew(30deg, 10deg)
表示水平方向傾斜30度,垂直方向傾斜10度。
translate 偏移
偏移同樣包括水平偏移和垂直偏移。translate(x,y)
水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)
僅水平方向移動(X軸移動);translateY(Y)
僅垂直方向移動(Y軸移動)。
-
animation
CSS3 中的 animation 是通過一個叫Keyframes 關鍵幀
的玩意來控制的,他的命名是由"@keyframes"開頭,後面緊接著是這個“動畫的名稱”加上一對花括號“{}”,括號中就是一些不同時間段樣式規則,有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的,如“0%”到"100%"之間,語法如下:
@keyframes IDENT { from { Properties: Properties value; } Percentage { Properties: Properties value; } to { Properties: Properties value; } } 或者全部寫成百分比的形式: @keyframes IDENT { 0% { Properties: Properties value; } Percentage { Properties: Properties value; } 100% { Properties: Properties value; } }
animation和transition一樣有自己相對應的屬性,那麽在animation主要有以下幾種:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面對其中的一些屬性進行解釋:
-
- animation-name 關鍵幀名
用來定義一個動畫的名稱,也就是由前面的keyframes
創建的動畫名,默認值為none
,當值為none
時,將沒有任何動畫效果。如果我們要同時附幾個animation
給一個元素,只要用逗號,
隔開即可。 - animation-iteration-count 動畫循環次數
默認為1
,如果要進行無限循環,只要設為infinite
即可。 - animation-direction 動畫播放的方向
其只有兩個值,默認值為normal
,如果設置為normal時,動畫的每次循環都是向前播放;另一個值是alternate
,他的作用是,動畫播放在第偶數次向前播放,第奇數次向反方向播放。 - animation-play-state 播放狀態
其主要有兩個值,running和paused,其中running為默認值。可以通過paused將正在播放的動畫停下了,也可以通過running將暫停的動畫重新播放。這個屬性不常用。
- animation-name 關鍵幀名
DEMO 1
DEMO 2
DEMO 3
CSS3 傻傻分不清楚的transition, transform 和 animation