css3實現動畫有幾種方式？

這是一個考驗面試者對css的基礎知識。

css實現動畫主要有3種方式，第一種是： transition實現漸變更畫，第二種是： transform轉變更畫，第三種是： animation實現自定義動畫，下面具體講一下3種動畫的實現方式。

transition漸變更畫

咱們先看一下transition的屬性：

• property:填寫須要變化的css屬性如：width,line-height,font-size,color等,全部做用與dom樣式的屬性;
• duration:完成過渡效果須要的時間單位(s或者ms)
• timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）

timing-function具體的值能夠看下面的表格：

值	描述
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)	在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值

• delay: 動畫效果的延遲觸發時間(單位ms或者s)

下面咱們看一個完整的例子：

<div class="base"></div>

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        /*簡寫*/
        /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

運行效果：

能夠看到，鼠標移上去的時候，動畫延遲0.5s開始，而且因爲 border-color沒有設置到 transition-property裏面，因此是沒有漸變更畫的。

---

transform轉變更畫

transform屬性應用於2D 或 3D轉換。該屬性容許咱們可以對元素進行旋轉、縮放、傾斜、移動這四類操做.通常是配合transition的屬性一塊兒使用。

1. none：定義不進行任何轉換，通常用於註冊掉該轉換。
2. transform-functions：定義要進行轉換的類型函數。主要有：

2.1 旋轉(rotate)：主要分爲2D旋轉和3D旋轉。rotate(angle)，2D 旋轉，參數爲角度，如45deg；rotate(x,y,z,angle)，3D旋轉，圍繞原地到(x,y,z)的直線進行3D旋轉；rotateX(angle)，沿着X軸進行3D旋轉；rotateY(angle)；rotateZ(angle)；
2.2 縮放(scale)：通常用於元素的大小收縮設定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z爲收縮比例。
2.3 傾斜(skew)：主要用於對元素的樣式傾斜。skew(x-angle, y-angle)，沿着x和y軸的2D傾斜轉換；skewX(angle)，沿着x軸的2D傾斜轉換；skew(angle)，沿着y軸的2D傾斜轉換。
2.4 移動(translate)：主要用於將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)。

<h5>transition配合transform一塊兒使用</h5>
<div class="base base2"></div>

.base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
      }

運行效果：

能夠看到盒子發生了旋轉，傾斜，平移，放大。

animation自定義動畫

爲了實現更靈活的動畫效果，css3還提供了自定義動畫的功能。
(1) name：須要綁定到選擇器的keyframe名稱。
(2) duration：完成該動畫須要花費的時間，秒或毫秒。
(3) timing-function：跟transition-linear同樣。
(4) delay：設置動畫在開始以前的延遲。
(5) iteration-count：設置動畫執行的次數，infinite爲無限次循環。
(6) direction：是否輪詢反向播放動畫。normal，默認值，動畫應該正常播放；alternate，動畫應該輪流反向播放。

<h5 class="title">animate自定義動畫</h5>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

運行效果：

能夠看到，自定義動畫能實現更靈活的動畫效果，包括了第一種和第二種動畫的全部功能，並且屬性也更全面。
以上幾種方式都是純css實現的動畫，其實用js也能實現更豐富，更靈活的動畫。最後提供幾個在線製做動畫的網站給你們：

在線製做1
在線製做2

---

以上代碼能夠在線體驗：
線上體驗地址
全部的源碼均可以在個人倉庫地址：下載
我的公衆號：

學習如逆水行舟，不進則退，前端技術飛速發展，若是天天不堅持學習，就會跟不上，我會陪着你們，天天堅持推送博文，跟你們一同進步，但願你們能關注我，第一時間收到最新文章。