CSS3動畫基礎

LifeOfCoding發表於2020-06-08

編寫頁面

記事本或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屬性——菜鳥教程傳送門

貝塞爾曲線

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

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

如上是網站的介面，函式的引數分別為座標系上紅球的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>

效果：

【matplotlib基礎】--動畫
2023-09-21
動畫
Flutter——動畫基礎（補間動畫）
2019-09-28
Flutter動畫
CSS基礎篇–CSS3圖片翻轉動畫技術詳解
2018-03-29
CSSS3動畫
CSS3動畫之逐幀動畫
2019-04-02
CSSS3動畫
CSS3 動畫解析
2019-03-03
CSSS3動畫
CSS3 animation 動畫
2019-02-04
CSSS3動畫
iOS動畫系列之四：基礎動畫之平移篇
2019-02-28
iOS動畫
淺談CSS3動畫
2020-12-14
CSSS3動畫
css3 動畫（一） transition
2018-07-08
CSSS3動畫
css3高階動畫
2018-07-19
CSSS3動畫
KeyShot基礎操作5 - 動畫篇
2024-10-20
動畫
iOS 動畫基礎總結篇
2018-07-18
iOS動畫
前端基礎-jQuery的動畫效果
2018-06-10
前端jQuery動畫
CSS3 animation逐幀動畫
2018-11-22
CSSS3動畫
CSS3動畫按鈕效果
2018-07-04
CSSS3動畫
CSS3實現流星動畫
2018-03-19
CSSS3動畫
CSS 怎樣寫一個動畫（從基礎動畫到3d動畫)
2019-03-12
CSS動畫3D
canvas動畫教程-2 基礎設施
2018-10-07
Canvas動畫
css3實現顫動的動畫
2019-02-16
CSSS3動畫
css3動畫效果抖動解決
2018-08-29
CSSS3動畫
畫素畫——明暗基礎
2024-04-10
CSS3全覽_動畫+濾鏡
2020-12-18
CSSS3動畫
css3動畫完成打字機效果
2020-12-25
CSSS3動畫
css3 動畫（三）animation 簡介
2018-07-22
CSSS3動畫
CSS3 loadding載入動畫效果
2018-05-27
CSSS3動畫
CSS3 loadding旋轉等待動畫
2018-06-08
CSSS3動畫
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
css3實現逐幀動畫
2018-06-29
CSSS3動畫
CSS3圖片上下動畫浮動效果
2018-03-20
CSSS3動畫
css3動畫實現數字動態增加
2024-07-01
CSSS3動畫
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
webapp中如何運用CSS3動畫
2021-09-09
WebAPPCSSS3動畫
CSS3漂亮的loadding載入動畫
2018-07-17
CSSS3動畫
CSS3水滴向下滴落動畫效果
2018-05-21
CSSS3動畫
讓css3動畫變得有趣wowjs
2018-07-25
CSSS3動畫JS
Html5 Canvas動畫基礎（碰撞檢測）
2018-11-23
HTMLCanvas動畫
iOS動畫專題·UIView二維形變動畫與CAAnimation核心動畫（transform動畫，基礎，關鍵幀，組動畫，路徑動畫，貝塞爾曲線）
2018-07-02
iOS動畫UIViewORM
css3實現動畫有幾種方式？
2021-09-09
CSSS3動畫