CSS3動畫基礎

LifeOfCoding發表於2020-06-08

目錄

編寫頁面
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>

效果:

相關文章