animation和transition的區(qū)別

發(fā)布時間：2020-10-12 16:09:13 作者：羊先生

在使用CSS3動畫時相信很多人都會接觸過animation，transition以及transform屬性。通過 CSS3，我們能夠創(chuàng)建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript——CSS3是世界上最可愛的語言

CSS3動畫和JS動畫的區(qū)別

JS 實現的是幀動畫
CSS3 實現的是補間動畫

幀動畫：使用定時器，每隔一段時間，更改當前的元素
補間動畫：過渡（加過渡只要狀態(tài)發(fā)生改變產生動畫）動畫(多個節(jié)點來控制動畫)性能會更好

transition

transition是一個簡單的動畫屬性，可以看作是是animation的簡化版本，通常拿來配合事件觸發(fā)使用，簡單易用

transition的屬性值

描述	屬性
transition-property	需要過渡的屬性，也可以是all，不能用block，none等
transition-duration	指定從一個屬性到另一個屬性過渡所要花費的時間。默認值為0，為0時，表示變化是瞬時的，看不到過渡效果
transiton-timing-function	就是過渡的動畫類型。可用的類型有l(wèi)iner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定制
transition-delay	指定檢測到過渡行為之后延遲一定時間后才開始進行執(zhí)行

transition特性

transition需用事件觸發(fā)【比如加個hover偽類】，不能在網頁加載時自動發(fā)生
一次性，不能重復發(fā)生，除非一再觸發(fā)
只有兩個狀態(tài)：開始和結束狀態(tài)
一條transition規(guī)則只能定義一個屬性

<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	規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0
animation-timing-function	速度曲線，和transition-timing-function一樣，可用的類型有l(wèi)iner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定制
animation-delay	規(guī)定動畫何時開始，默認是 0
animation-iteration-count	規(guī)定動畫被播放的次數。默認是 1
animation-direction	normal 默認值，如果設置為normal時，動畫每次循環(huán)都是向前（即按順序）播放，alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大于1時設置有效）
animation-play-state	running，可以通過該值將暫停的動畫重新播放，這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放，paused，暫停播放
animation-fill-mode	默認情況下，動畫結束后，元素的樣式將回到起始狀態(tài)，animation-fill-mode屬性可以控制動畫結束后元素的樣式。主要具有四個屬性值：none（默認，回到動畫沒開始時的狀態(tài)。），forwards（動畫結束后動畫停留在結束狀態(tài)），backwords（動畫回到第一幀的狀態(tài)），both（根據animation-direction輪流應用forwards和backwards規(guī)則）

<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>

當鼠標移入的時候暫停，移出的時候繼續(xù)變換顏色

transform

首先要注意的是transform屬性是靜態(tài)屬性，只要寫進style里就會直接顯示生效，不會出現動畫過程
通過使用transform屬性，能夠對元素進行移動（translate）、縮放（scale）、旋轉（rotate）、翻轉（skew），更多詳細參數可以參考CSS3 transform 屬性

總結

區(qū)別	transition	animation
是否能自動執(zhí)行	不能，需要事件觸發(fā)，比如hover	能
能否重復發(fā)生	不能，除非在一次觸發(fā)	能
能否包含多個狀態(tài)	不能，只有開始和結束狀態(tài)	能，比如從0% 到100%，任意指定過渡狀態(tài)
能否暫停	不能，一次性	能，比如hover事件觸發(fā)暫停
能否定義速度曲線	能	能
能否定義某個屬性值過渡	能	能

以上就是animation和transition的區(qū)別的詳細內容，更多關于animation和transition的資料請關注腳本之家其它相關文章！

Tag：transition Animation

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

animation和transition的區(qū)別

相關文章

最新評論

文章分類

大家感興趣的內容

最近更新的內容