[前端日記]CSS3 動畫樣式屬性transform、transition和animation

 

transform

transform可以用來設置元素的形狀改變，主要有以下幾種變形：rotate（旋轉）、scale（縮放）、skew（扭曲）、translate（移動）和matrix（矩陣變形），語法如下：

 

.transform-class {
    transform ： none | <transform-function> [ <transform-function> ]*
}

none表示不做變換；<transform-function>表示一個或多個變化函數，變化函數由函數名和參數組成，參數包含在()裏面，用空格分開，例如：

 

.transform-class {
    transform ： rotate(30deg) scale(2,3);
}

transform-origin 基點

所有的變形都是基於基點，基點默認爲元素的中心點。用法：transform-origin: (x, y)，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的單詞來表示例如：x 可以用left、center、right；y 可以用top、center、bottom。

 

.transform-class {
    transform-origin: (left, bottom);
}

rotate 旋轉

用法：rotate(<angle>)；表示通過指定的角度對元素進行旋轉變形，如果是正數則順時針旋轉，如果是負數則逆時針旋轉，例如：

 

.transform-rotate {
    transform: rotate(30deg);
}

transform-rotate.png

scale 縮放

它有三種用法：scale(<number>[, <number>])、scaleX(<number>)和scaleY(<number>)；分別代表水平和垂直方向同時縮放、水平方向的縮放以及垂直方向的縮放，入參代表水平或者垂直方向的縮放比例。縮放比例如果大於1則放大，反之則縮小，如果等於1代表原始大小。

 

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

transform-scale.png

translate 移動

移動也分三種情況：translate(<translation-value>[, <translation-value>])、translateX(<translation-value>)和translateY(<translation-value>)；分別代表水平和垂直的移動、水平方向的移動以及垂直方向同時移動，移動單位是 CSS 中的長度單位：px、rem等;

 

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

transform-translate.png

skew 扭曲

扭曲同樣也有三種情況，skew(<angle>[, <angle>])、skewX(<angle>)和skewY(<angle>)；同樣也是水平和垂直方向同時扭曲、水平方向的扭曲以及垂直方向的扭曲，單位爲角度。

 

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

transform-skew.png

matrix

矩陣變形相對來說非常複雜，涉及到數學中的矩陣計算，有興趣的同學可以研究一下：CSS3 Transform Matrix

transition

transition是用來設置樣式的屬性值是如何從從一種狀態變平滑過渡到另外一種狀態，它有四個屬性：

• transition-property（變換的屬性，即那種形式的變換：大小、位置、扭曲等）；
• transition-duration（變換延續的時間）；
• transition-timing-function（變換的速率）
• transition-delay（變換的延時）

 

.transition-class {
    transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*;
}

transition-property

它是用來設置哪些屬性的改變會有這種平滑過渡的效果，主要有以下值：

• none；
• all；
• 元素屬性名：
  • color；
  • length；
  • visibility；
  • ...

 

.transition-property {
    transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*;
}

transition-duration

它是用來設置轉換過程的持續時間，單位是s或者ms，默認值爲0；

 

.transition-duration {
    transition-duration ： <time> [, <time>]* ;
}

transition-timing-function

它是來設置過渡效果的速率，它有6種形式的速率：

• ease：逐漸變慢（默認），等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
• linear：勻速，等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
• ease-in：加速，等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；
• ease-out：減速，等同於貝塞爾曲線(0, 0, 0.58, 1.0)；
• ease-in-out：先加速後減速，等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)；
• cubic-bezier：自定義貝塞爾曲線。

 

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

貝塞爾曲線

transition-delay

它是來設置過渡動畫開始執行的時間，單位是s或者ms，默認值爲0；

 

.transition-delay {
    transition-delay ： <time> [, <time>]*;
}

transition

它是transition-property、transition-duration、transition-timing-function、transition-delay的簡寫：

 

.transition {
    transition ：<property> <duration> <timing function> <delay>;
}

animation

animation比較類似於 flash 中的逐幀動畫，逐幀動畫就像電影的播放一樣，表現非常細膩並且有非常大的靈活性。然而transition只是指定了開始和結束態，整個動畫的過程也是由特定的函數控制。學習過 flash 的同學知道，這種逐幀動畫是由關鍵幀組成，很多個關鍵幀連續的播放就組成了動畫，在 CSS3 中是由屬性keyframes來完成逐幀動畫的。

@keyframes

 

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
//or
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

• animationName：動畫名稱，開發人員自己命名；
• percentage：爲百分比值，可以添加多個百分比值；
• properties：樣式屬性名稱，例如：color、left、width等等。

animation-name

它是用來設置動畫的名稱，可以同時賦值多個動畫名稱，用,隔開：

 

.animation {
    animation-name: none | IDENT[,none | IDENT]*;
}

animation-duration

它是用來設置動畫的持續時間，單位爲s，默認值爲0：

 

.animation {
    animation-duration: <time>[,<time>]*;
}

animation-timing-function

和transition-timing-function類似：

 

.animation {
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

animation-delay

它是來設置動畫的開始時間，單位是s或者ms，默認值爲0：

 

.animation {
    animation-delay: <time>[,<time>]*;
}

animation-iteration-count

它是來設置動畫循環的次數，默認爲1，infinite爲無限次數的循環：

 

.animation {
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}

animation-direction

它是來設置動畫播放的方向，默認值爲normal表示向前播放，alternate代表動畫播放在第偶數次向前播放，第奇數次向反方向播放：

 

.animation {
    animation-direction: normal | alternate [, normal | alternate]*;
}

animation-play-state

它主要是來控制動畫的播放狀態：running代表播放，而paused代表停止播放，running爲默認值：

 

.animation {
    animation-play-state:running | paused [, running | paused]*;
}

animation

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的簡寫：

 

.animation {
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}