溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS3中animation和transition有什么區別的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
CSS3動畫和JS動畫的區別
JS 實現的是幀動畫
CSS3 實現的是補間動畫
幀動畫：使用定時器，每隔一段時間，更改當前的元素
補間動畫： 過渡（加過渡只要狀態發生改變產生動畫）動畫(多個節點來控制動畫)性能會更好
transition
transition是一個簡單的動畫屬性，可以看作是是animation的簡化版本，通常拿來配合事件觸發使用，簡單易用
transition的屬性值
| 描述 | 屬性 |
|---|---|
| transition-property | 需要過渡的屬性，也可以是all，不能用block，none等 |
| transition-duration | 指定從一個屬性到另一個屬性過渡所要花費的時間。默認值為0，為0時，表示變化是瞬時的，看不到過渡效果 |
| transiton-timing-function | 就是過渡的動畫類型。可用的類型有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定制 |
| transition-delay | 指定檢測到過渡行為之后延遲一定時間后才開始進行執行 |
transition特性
transition需用事件觸發【比如加個hover偽類】，不能在網頁加載時自動發生
一次性，不能重復發生，除非一再觸發
只有兩個狀態：開始和結束狀態
一條transition規則只能定義一個屬性
<body>
<div ></div>
</body>
<style>
.box {
height: 100px;
width: 100px;
background-color: lightpink;
transition: width 1s 0.5s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>效果如下
也可以在 hover 中寫 transition: width 1s 0.5s ease-in-out
.box:hover {
width: 200px;
transition: width 1s 0.5s ease-in-out;
}
其實寫在hover上也是可以的，但是當我移出元素后，元素寬度立馬恢復，而沒有過渡！
原因很簡單，你transistion只寫在hover上，也就是說只有鼠標移上去的時候，該偽類才生效
animation
animation的屬性值
| 屬性 | 描述 |
|---|---|
| animation-name | 用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0 |
| animation-timing-function | 速度曲線，和transition-timing-function一樣，可用的類型有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定制 |
| animation-delay | 規定動畫何時開始，默認是 0 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1 |
| animation-direction | normal 默認值，如果設置為normal時，動畫每次循環都是向前（即按順序）播放，alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大于1時設置有效） |
| animation-play-state | running，可以通過該值將暫停的動畫重新播放，這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放，paused，暫停播放 |
| animation-fill-mode | 默認情況下，動畫結束后，元素的樣式將回到起始狀態，animation-fill-mode屬性可以控制動畫結束后元素的樣式。主要具有四個屬性值：none（默認，回到動畫沒開始時的狀態。），forwards（動畫結束后動畫停留在結束狀態），backwords（動畫回到第一幀的狀態），both（根據animation-direction輪流應用forwards和backwards規則） |
<body>
<div ></div>
</body>
<style>
.box {
height: 200px;
width: 200px;
animation: 3s type forwards alternate infinite;
animation-play-state: running;
}
.box:hover {
animation-play-state: paused;
}
@keyframes type {
from {
background: yellowgreen
}
50% {
background: yellow
}
to {
background: aquamarine
}
}
</style>當鼠標移入的時候暫停，移出的時候繼續變換顏色
transform
首先要注意的是transform屬性是靜態屬性，只要寫進style里就會直接顯示生效，不會出現動畫過程
通過使用transform屬性，能夠對元素進行移動（translate）、縮放（scale）、旋轉（rotate）、翻轉（skew），更多詳細參數可以參考CSS3 transform 屬性
總結
| 區別 | transition | animation |
|---|---|---|
| 是否能自動執行 | 不能，需要事件觸發，比如hover | 能 |
| 能否重復發生 | 不能，除非在一次觸發 | 能 |
| 能否包含多個狀態 | 不能，只有開始和結束狀態 | 能，比如從0% 到100%，任意指定過渡狀態 |
| 能否暫停 | 不能，一次性 | 能，比如hover事件觸發暫停 |
| 能否定義速度曲線 | 能 | 能 |
| 能否定義某個屬性值過渡 | 能 | 能 |
感謝各位的閱讀！關于“CSS3中animation和transition有什么區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
