關於css3裡的transition和animation區別介紹-css教學-PHP中文網

** 做了很久的專案了，transition和animation兩個css3屬性經常被用到實際專案當中，想想把它整理出來。如下：

1：先介紹transition：

a，在做專案中常會遇見這樣的情景，例如一個按鈕，當滑鼠移入進去的時候改變按鈕背景顏色以及字體顏色，此時我們通常會這麼做：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 
.btn:hover{background:green;color:white;}

登入後複製

關於css3裡的transition和animation區別介紹

#b，我們會發現背景以及字體顏色是瞬間改變的，是不是會顯得特別生硬呢

此時transition就登場了，見程式碼：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：0.4s;}

登入後複製

c，加入transition後我們會發現按鈕背景顏色以及字體顏色具備時間漸進的過程，直到結束。

這個漸進是怎麼來的呢，沒錯，就是0.4s，

談及0.4s，就要扯到transition的各項屬性了，在此我不打算細緻地都寫進部落格來，因為是完全可以自己查閱資料的。

（1：上述的0.4s是transition其中一個屬性的簡寫： transition-duration

transition-duration 顧名思義，表示動畫持續的時間，也就是上面的0.4s了。知道一個事物所具備的運動具有這幾種：

　　　（a linear：勻速

　　　（b ease-in：加速

##　　　（d cubic-bezier

函數

：自訂速度模式（幾乎不用）

#上面程式碼中就簡單單只寫了transition： 0.4s;為什麼具備有一個運動呢？

（3：是這樣子的，transition有一個屬性叫做transition-timing-function，預設是ease，它運動的形式是逐漸放慢的。

不簡寫就是 transition: 0.4s ease

d，我們看到，按鈕hover之後，hover樣式裡所有css描述的變化都具備有transition所描述的動畫。該怎麼做呢？它指定了動畫中只背景顏色具備這個時段的動畫。

e，我們在實際專案中會發現，有時候我們需要一個動畫具備有一個延遲的展現，不希望他立即就產生動畫

此時，transition的又一個屬性就出來了，transition-delay

見程式碼：

transition: 0.4s background ease-in

登入後複製

我們會發現，此時這個按鈕的背景字體動畫是在1秒鐘之後才開始的。

1：transition需要一個

事件

來觸發，例如hover，所以沒辦法在網頁載入時自動發生

2: transition是一次性的，不能重複發生，除非一再觸發。

3： transition只能定義開始

狀態

和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

4：一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

（為了表達清晰，上述4個限制是我引用阮一峰大神博客裡的簡介）

為了突破這些限制，animation出來了。

2：animation：

a）,先不詳細解釋animation的各項屬性了，我們直接來showing代碼吧

transition: 0.4s 1s;

登入後複製

上面的程式碼會產生這樣的效果，請見截圖：

b），当鼠标移入p的时候，p会发生一系列的样式改变（截图无法表现过程），在2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画，是因为什么呢？

c），我准备作这样的解释，此时，你需要做一个animation动画只需要3点

1. 需要一个承载动画的元素，如p

2. 当前的元素写一个animation的css，其中定义你所需要这个动画产生的效果。（你暂时不需要知道如何编写这个动画内部的css）

3. 编写一个动画进程，以@keyframes关键字来定义，而这个动画的进程有一个名字，如change，

　　----------》你可以把这个进程理解成一个函数，@keyframes对应的就是function，而change对应的就是函数名字-----------》最终等待被调用。

好了，明白了以上三点，我们就可以来剖析animation的庐山真面目了。

a）我们接着再来看这段代码：

animation: 2s change infinite;
　　　　

@keyframes change {
       0% { background: orange; }
       50% { background: pink;width: 200px; }
       100% { background: red;height: 300px; }
}

登入後複製

1. 我们先来看这个“所谓的函数change”

　　　　(1):这个change是animation其中的一个属性，叫做动画名字-----》 animation-name:change;

2. 我们再来看这个“百分比”

　　　 (1):这个百分比你只要理解它是这个这个动画在多少时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改变的的样式属性（可以定义多种）

　　　 (2):当然也可以这样写：

@keyframes change {
            from { background: orange; }
            50% { background: pink;width: 200px; }
            to { background: red;height: 300px; }
}

登入後複製

3.看完了动画制作的过程，现在我们来看如何调用这个动画：见代码：

.c:hover{animation: 2s change infinite;}

登入後複製

（1），机智的你肯定看到了2s，是的没错，就是它让动画2秒完成。和transition一样，它是animation的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：animation-duration: 2s;

（2），机智的你肯定看到了change,是的没错，就是如此调用这个“动画函数”的.只需要在当前元素animation的css样式里写入就可以了。

（3），刚刚前面我们说了，这段代码会在鼠标移入p元素后2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画

　　　　 *：注意看到无限制三个字，

　　　　 *：无限制怎么来的呢？此时这段代码只剩下infinite了。

　　　　 *：不用想，他也是animation其中之一属性：叫做 animation-iteration-count: infinite;

　　　　 *：这个属性是用来定义这个动画应该播放多少次，infinite代表的无限制（无数次），当然你也可以在让它播放一个定值的数次，比如3次

animation-iteration-count: 3;

登入後複製

在这里，你只需要在animation里的css里写入次数就可以了：

.c:hover{animation: 2s change 3;}

登入後複製

4：这个动画虽然已经介绍完了，但是我们会发现动画在两秒钟后又会恢复原样（初始状态）：

關於css3裡的transition和animation區別介紹

此时我们想让动画两秒执行完毕之后保持在结束状态，这该怎么办了，此时animation的另一个属性就派上用场了

-------------》animation-fill-mode:forwards;

在这里，你只需要在animation里的css里写入forwards就可以了：

.c:hover{animation: 2s change 3 forwards;}

登入後複製

2秒动画结束后就会是这样：

關於css3裡的transition和animation區別介紹

5：同样的，animation也和transition一样具备延时动画的属性：

　　　　　　　　　　　　　　　　　　　　------------》animation-delay: 1s;

同样的animation简写写法如下,代表鼠标移入p内，1秒后动画开始

.c:hover{animation: 2s 1s change 3 forwards;}

登入後複製

6：同样的，animation也和transition一样具备动画以何种速度呈现的属性：默认是ease，它运动的形式是逐渐放慢的。

　　　　　　　　　　　　　　　　------------------》animation-timing-function: ease;

　　　（a linear：匀速

　　　（b ease-in：加速

　　　（c ease-out：减速

　　　（d cubic-bezier函数：自定义速度模式（几乎不用）

****要改变运动形势只要添加相应的速度代表参数了，见代码：

.c:hover{animation: 2s 1s change 3 forwards linear;}

登入後複製

7:animation还有一个属性我就不打算细写了，--------》animation-direction，默认情况下是normal，

　　它是用来改变动画播放不仅只可以从结束状态跳回到起始状态这种形式。

8：上面说过，animation浏览器一加载便可以自动触发：

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; animation: 2s change forwards;}

登入後複製

** 此时你会发现，浏览器一运行这个p就开始动画了。至于什么时候触发，那就要看项目具体需求了。

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。

以上是關於css3裡的transition和animation區別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！