置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

CSS動畫

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

CSS動畫是一種瀏覽器上的動態表現形式。

簡介

大約在08年前後,市面上的主流瀏覽器以增強用戶體驗、方便代碼設計為目的,開始增加一些不需要依賴JavaScript的特殊動畫效果的實現。時至今日,這些內容已經被默認為CSS3標準的一部分,是一個瀏覽器所必須要支持的,一般認為它包括:變形(Transforms)、過渡(Transitions)、動畫(Animation)三部分。

變形(Transforms)

變形(Transforms)分為2D變形和3D變形兩種,本質上是使用矩陣向量對元素計算縮放、偏移、傾斜、旋轉等變形,所以2D變形是3階矩陣,具有6個參數、而3D變形則是4階矩陣,具有16個參數。

Matrix

matrix(a,b,c,d,e,f)方法是一個矩陣,是其他所有的2D變形的根本方法。matrix不需要單位。

matrix3d(……)是3D矩陣,很麻煩。

矩陣
a c e · x = ax+cy+e
b d f y bx+dy+f
0 0 1 1 0+0+1

表中x、y表示換換前坐標。

例子:

<!--向左、下分别移动10像素的距离。-->
<div style="display:inline-block;background-color:#000;width:100px;height:100px;">
<div style="background-color:#fff;width:10px;height:10px;transform:translate(10px,10px)">
</div>
</div>
<!--换成矩阵的书写方式。-->
<div style="display:inline-block;background-color:#000;width:100px;height:100px;">
<div style="background-color:#fff;width:10px;height:10px;transform:matrix(1,0,0,1,10,10)">
</div>
</div>

Translate

Translate是需要單位的。

translate(x,y)是2D坐標轉換,x表示橫向偏移,y表示縱向偏移。

translate3d(x,y,z)是3D坐標轉換,

translateX(x)是X軸的坐標轉換,translateY(y)是Y軸的坐標轉換。

translateZ(z)是Z軸的坐標轉換,是3D坐標轉換。

公式:translate(x,y)=matrix(1,0,0,1,x,y)

Scale

scale(x,y)是定義一個2D縮放。

scale(x,y)是2D坐標縮放,x表示橫向縮放,y表示縱向縮放。

scaleX(x)是X軸的縮放,scaleY(y)是Y軸的縮放。

scaleZ(z)是Z軸的縮放,是3D縮放轉換。

公式:scale(x,y)=matrix(x,0,0,y,0,0)

Rotate

rotate(angle)是定義一個2D旋轉,angle表示一個角度,單位是deg。

rotate3d(x,y,z,angle)是定義一個3D旋轉。

rotateX(angle)定義沿着X軸的3D旋轉,rotateY(angle)定義沿着Y軸的3D旋轉,rotateZ(angle)定義沿着Z軸的3D旋轉。

公式:rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

注意:第三個值前面帶了一個負號,這是奇偶性問題,這裏不做展開。

Skew

skew(x,y)是定義一個2D傾斜轉換,x表示X軸的傾斜轉換,y表示Y軸的傾斜轉換。

skew3d(x,y,z)是一個3D傾斜轉換。

skewX(x)是X軸的傾斜轉換,skewY(y)是Y軸的傾斜轉換。

公式:skew(x,y)=matrix(1,tan y,tan x,1,0,0)

Perspective

perspective(n)定義3D透視。

例子

關於3D轉換的小例子:

過渡(Transitions)

默認的簡寫方法是:transition: transition-property transition-duration transition-timing-function Transition-delay

Property

transition-property定義需要進行過渡效果屬性名稱,這個屬性一定要是可以連續變化的,比如:寬高、字號、顏色等。

可以聲明多個屬性同時開始過渡,以逗號隔開即可,all表示這個元素的所有屬性都將進行過渡。

Duration

transition-duration定義過渡效果花費的時間,默認是0,單位是ms,0意味着不會有任何變化。

Timing-function

transition-timing-function規定過渡效果的時間曲線,默認是"ease"。

它可以是以下參數或方法。

  • linear:勻速變化,等同於cubic-bezier(0,0,1,1)。
  • ease:先慢後快再慢。等同於cubic-bezier(0.25,0.1,0.25,1)。
  • ease-in:緩慢加速,等同於cubic-bezier(0.42,0,1,1)。
  • ease-out:緩慢減速,等同於cubic-bezier(0,0,0.58,1)。
  • ease-in-out:緩慢加速緩慢減速,等同於cubic-bezier(0.42,0,0.58,1)。
  • cubic-bezier(n,n,n,n)聲明一個方法,規定一個貝塞爾曲線函數定義時間曲線,各個n的有效值是0到1[1]

Transition-delay

transition-delay定義過渡效果的延遲時間,單位是ms,默認是0,0意味着不延遲,立即開始。

例子

Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg

動畫(Animation)

參考:{{M-animation}},通過調整旋轉的角度以及動畫播放速度,可以得到不同的效果。(示例播放次數的參數為無限循環:animation-iteration-count:infinite;)

注意:鼠標懸停以此打斷Mea右手(的動畫播放)。

神樂めあ2.jpg
神樂めあ2.jpg
神樂めあ2.jpg
神樂めあ2.jpg
{{M-animation}}<div style="display:inline-blockposition:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="moe-ani-count-infinite ani-time-1 ani-rotate30-re"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>
<div class="moe-animation" style="display:inline-block;position:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="ani-hover moe-ani-count-infinite ani-time-01 ani-rotate360"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>

animation

所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。

@keyframes

@keyframes規定動畫關鍵幀,它只能寫在樣式表裏,沒辦法寫在內聯樣式中。

from等於0%,to等於100%,中途也可以使用百分比數值增加更多的關鍵幀,具體時間還是duration定義的總時長。

/* 比如将样式的颜色从red变为black */
@keyframes seecolor1
{
from {color:red;}
to {color:black;}
}
@keyframes seecolor2
{
0% {color:red;}
50% {color:blue}
100% {color:black;}
}

name

animation-name:規定由@keyframes定義的動畫的名稱,具有這個屬性的元素將會執行@keyframes規定的動畫。

duration

animation-duration定義動畫效果完成一個周期所花費的時間,默認是0,單位是ms。

timing-function

animation-timing-function規定動畫的速度曲線。默認是 "ease",同過渡一樣。

delay

animation-delay定義動畫效果的延遲時間,單位是ms,默認是0,0意味着不延遲,立即開始。

iteration-count

animation-iteration-count定義動畫播放的次數,默認是1,infinite將會無限次循環播放。

direction

animation-direction定義動畫完成一次周期後,在下一周期內是否逆向地播放。默認是normal,alternate將會正向逆向交替播放。

play-state

animation-play-state規定動畫播放狀態,默認是播放中running,paused是暫停狀態。通過js可以對元素的這一屬性進行更改,可以播放或暫停。

fill-mode

animation-fill-mode規定元素在動畫播放之外的狀態。

  • none:不改變默認行為。
  • forwards:動畫完成後,保持在最後一個關鍵幀中定義的樣式。
  • backwards:動畫開始前,animation-delay中,應用在第一個關鍵幀中定義的樣式。
  • both:同時具有兩種屬性。

例子

註釋