CSS3動畫基礎

LifeOfCoding發表於2020-06-08
CSSS3動畫

目錄

編寫頁面
transition屬性
貝塞爾曲線
transform

animation 和 keyframs

編寫頁面

記事本或SublimeText或vscode編寫html:

<html>

<div id="box"></div>

<style>
#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
}

</style>

</html>

加上滑鼠懸浮的效果:

<html>

<div id="box"></div>

<style>
#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
}

/*滑鼠懸浮後的樣式*/
#box:hover {
    /*向下偏移50px*/
    top: 50px;
}
</style>

</html>

效果圖如下:

瀏覽器只渲染出“box”的初始狀態, 和滑鼠懸浮後的狀態"top： 50px;", 效果較為生硬，可以使用"transition"屬性豐富視覺效果。

transition屬性

  transition譯作“過渡”，在css3中，transition屬性用來設定元素過渡效果。
  transition包含4個子屬性，分別為:

屬性 說明 預設值
property 設定給元素的那個方面新增過渡效果，比如元素的"width"和"height"均發生改變時，可以指定該屬性為"width",那麼元素的"width"的變動才有過渡效果。"all"表示所有變動都加上過渡效果。 all
duration 設定過渡效果的持續時間，至少要給transition設定這個子屬性，否則transition屬性就沒意義了。 0s
timing-function 過渡函式，該屬性決定元素的過渡效果與時間的關係。 ease
delay delay即為“延遲”，表示該元素在載入後多久才開始過渡效果 0s

這幾個元素的順序如下:

transition: property duration timing-function delay;

修改上面的“#box”樣式:

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    /*設定過渡效果 持續1秒，延遲500毫秒才開始*/
    transition: 1s 500ms; /*等價於 transition: all 1s ease 500ms */
    /*相容webkit核心*/
    -webkit-transition: 1s 500ms;
}

transition屬性加在"#box"元素上，表示該元素變換時按設定的效果進行變換。

修改檔案後可以發現過渡效果並沒有生效，這是因為"#box"沒有設定"top"，只是在滑鼠懸浮後才出現"top"屬性，即解析器沒有找到“top”過渡的“初始狀態”，“過渡”就應該包含元素的初始狀態和最終狀態。

給"#box"加上"top: 0;":

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    top: 0;
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    /*設定過渡效果 持續1秒，延遲500毫秒才開始*/
    transition: 1s 500ms; /*等價於 transition: all 1s ease 500ms */
    /*相容webkit核心*/
    -webkit-transition: 1s 500ms;
}

效果如下:

關於timing-function，還可以選擇"linear"(線性效果)、"ease-in"(漸進)等，想實現更好玩的效果，可以藉助“貝塞爾曲線函式”。

關於transition屬性——菜鳥教程傳送門

貝塞爾曲線

貝塞爾曲線百度百科
關於貝塞爾曲線，有很多資料，不再贅述。

貝塞爾曲線視覺化
這是一個貝塞爾曲線函式視覺化的一個網站，用這個網站可以直觀地生成合適的動畫加速度函式。

CSS3動畫基礎

  如上是網站的介面，函式的引數分別為座標系上紅球的x軸座標、y軸座標和藍綠球的x軸座標和y軸座標。座標系橫軸為時間，縱軸為動畫的 progress, 直譯過來是程式、進展的意思，對映到平移上就是指移動的點到原點的偏移量。曲線的斜率，反映的是動畫的加速度。
  動圖中兩個方塊是自定義動畫與線性動畫的對比。自定義動畫後面具有彈跳的效果，在左上角座標系上表現為後段往下的凹陷。動畫的整體效果是元素離原點的距離越來越遠，到後段反而離近一點點，然後又遠離，直至到達終點。

選擇合適的函式“cubic-bezier(.37,1.44,.57,.77)”設定到"#box"元素中:

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    top: 0;
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; 
    /*相容webkit核心*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}

效果如圖:

transform

  以上提及的動畫效果都是給元素設定初始狀態和最終狀態，然後讓瀏覽器自動渲染的，這種叫“補間動畫”，即定義初始和結束狀態，瀏覽器自動計算並補充“中間的狀態”最後渲染出來，“補間動畫”在flash，AE之類的軟體都可以看到。
  上面例子是已經知道了"box"的初始狀態"top: 0;"了，那萬一有的需求是一開始不知道“box”的位置呢，那該如何使得"box"向下移動？那就是"transform"屬性的功勞了。
  "transform"就是“改變形態”的意思，就是“汽車人變形”裡的“變形”，通過“transform”屬性可以改變元素的狀態。
  transform包含很多的變換效果，一一介紹。

translate

translate是“轉變，轉為”的意思，在css3中，translate是transform的子屬性，用來平移元素。
translate包含如下幾種使用方法：

名稱 描述 示例
translateX(x) 表示水平移動，x為負是往左，為正則向右移動 transform: translateX(10px)
transform: translateX(-15%)
translateY(y) 豎直移動，y為負向上，為正向下 同上
translateZ(z) 需配合“perspective()”使用，perspective()用來定義“景深”。z為負時是遠離使用者(螢幕)，正是接近使用者 transform: perspective(500px) translateZ(200px)
translate(x, y) 二維平面的移動，是最前面兩個的結合 簡單
translate(x, y, z) 三維空間的移動，最前面三個的結合 同上

把上面的html改成如下，效果一樣：

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; 
    /*相容webkit核心*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}

/*滑鼠懸浮後的樣式*/
#box:hover {
    /*向下偏移50px*/
    transform: translateY(50px);
    /*相容webkit*/
    -webkit-transform: translateY(50px);
}

scale

scale就是縮放的意思，對元素進行縮放變換。包含:

  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • scale(x, y)
  • scale3d(x, y, z)

用法與translate一致，只是引數是表示縮放的倍數，“1”表示原來的一倍（不放大不縮小），“0.5”縮小到原來一半，“2”變為原來兩倍。

transform: scale(.5);

rotate

旋轉變換，包含:

  • rotate(angle): 最簡單的旋轉變換，angle為負逆時針，為正是順時針
  • rotateX(angle): 繞著X軸旋轉
  • rotateY(angle): 繞Y軸旋轉
  • rotaleZ(angle): 繞Z軸旋轉
  • rotate3d(x,y,z,angle): 這個複雜一點，是在空間直角座標系(x,y,z)中選擇一個點，然後該點與原點（0,0,0）連成一條線，然後元素繞該線旋轉。
    1. rotate3d(1,0,0,180deg)等價於rotateX(180deg)
    2. rotate3d(0,1,0,180deg)等價於rotateY(180deg)
    3. rotate3d(0,0,1,180deg)等價於rotateZ(180deg)
transform: rotate(180deg);

skew

傾斜變換，包含:

  • skewX(angle): 相對X軸傾斜,X軸方向上不變，Y軸旋轉angle度。
  • skewY(angle): 相對Y軸傾斜，同上。
  • skew(x-angle, y-angle): 結合起來。

skew不太好理解，結合例子來看：
一、

transform: skewX(45deg);


可以看到“測試字樣”在X軸上沒有變化，向著Y軸方向旋轉45度。

二、

transform: skewY(45deg);


在Y軸方向上沒變，"box"的豎邊仍與Y軸平行，橫邊則向著X軸方向旋轉45度。

三、

transform: skew(45deg,45deg);

skew不好理解，這裡貼出兩篇文章：

matrix

矩陣變換，包含:

  • matrix(n,n,n,n,n,n)
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

其它的變換都可以由矩陣變換獲得，這是線性代數的知識，學的都還給老師了.......

對CSS3中的transform：Matrix（）矩陣的一些理解

perspective

用於定義景深，與上面提到的3d變換配合使用，景深就是元素離眼睛（螢幕）的距離，在電腦上，圖形通過變換來讓我們眼睛看到的圖形產生距離感，大概就是近大遠小之類的。

transform: perspective(500px) rotate3d(1, 0, 0, 45deg);

transform-origin

transfor-origin屬性用來設定元素變換的基點。預設的，rotate繞元素中點旋轉，如果想讓元素繞左上角旋轉，可以把transform-origin設定為：

transform-orgin: 0% 0%;

示例：

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; /*過渡效果*/
    transform-origin: 0% 0%;/*設定動畫的基點*/
    /*相容webkit核心*/
    -webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
    -webkit-transform-origin: 0% 0%;

}

/*滑鼠懸浮後的樣式*/
#box:hover {
    transform: rotate(45deg);
    /*相容webkit*/
    -webkit-transform: rotate(45deg);
}


注意，"transform-origin"屬性是放在"#box"上而不是"#box:hover"

animation和keyframes

  上面提到的動畫均為補間動畫，自定義初始和結束的狀態，由瀏覽器計算渲染中間狀態。這些初始和結束的關鍵狀態，可以稱為“關鍵幀”，即“keyframes”。如果我們想實現更為精細的動畫效果，想在元素變換的“過程中”也加上特定的“狀態”，即插入“關鍵幀”，可以通過 “keyframes” 和 “animation” 屬性實現。
  animation包含8個子屬性:

名稱 描述
name keyframe的名稱
duration 持續時間
timing-function 速度曲線
delay 延遲多久才開始
iteration-count 播放的次數,一整個動畫流程為一次
direction 是否在播放完後再反向播放
fill-mode 動畫不播放時的樣式
play-state 動畫的狀態，正在執行還是暫停

keyframe的定義如下:

@keyframes name{
    percentage1 {state1}
    percentage2 {state2}
}

/*相容webkit*/
@-webkit-keyframes name{
    percentage1 {state1}
    percentage2 {state2}
}

name 是關鍵幀的名稱
percentage 是動畫週期的時刻百分比，即整個動畫週期的第百分之幾的時刻，50%表示播放到一半，30%表示動畫播放到百分之30.
state 是該時刻的元素狀態，如“top: 10px”，此刻元素距離上方的距離。

修改html檔案:

<html>

<div id="box" style="line-height: 100px; text-align: center;">測試</div>

<style>

/*關鍵幀*/
@keyframes test{
    0%,20%,50%,80%,100%{transform: translateX(0)}
    40%{transform: translateX(30px)}
    60%{transform: translateX(15px)}
}

/*相容*/
@-webkit-keyframes test{
    0%,20%,50%,80%,100%{-webkit-transform: translateX(0)}
    40%{-webkit-transform: translateX(30px)}
    60%{-webkit-transform: translateX(15px)}
}

#box {
    background-color: rgb(246, 96, 78); /*背景色*/
    width: 100px; /*寬度*/
    height: 100px; /*長度*/
    position: relative; /*位置*/
    border-radius: 15px; /*加點圓角*/
    transition: 1s linear 500ms; /*過渡效果*/
    -webkit-transition: 1s linear 500ms; /*過渡效果，相容webkit核心*/
}

/*滑鼠懸浮後的樣式*/
#box:hover {
    animation:test 1s 0s ease both; /*繫結關鍵幀*/
    -webkit-animation: test 1s 0s ease both; /*相容*/
}
</style>

</html>

效果：

相關文章