CSS3動畫基礎

時間  2020-06-09
標籤 css3 css 動畫 基礎 欄目 CSS 简体版
原文   原文鏈接

目錄

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

animation 和 keyframshtml

編寫頁面

記事本或SublimeText或vscode編寫html:css3

<html>

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

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

</style>

</html>

加上鼠標懸浮的效果:web

<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」過渡的「初始狀態」，「過渡」就應該包含元素的初始狀態和最終狀態。.net

給"#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不太好理解，結合例子來看：
1、

transform: skewX(45deg);


能夠看到「測試字樣」在X軸上沒有變化，向着Y軸方向旋轉45度。

2、

transform: skewY(45deg);


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

3、

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>

效果：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程