欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

animation和transition的區(qū)別

  發(fā)布時(shí)間：2020-10-12 16:09:13   作者：羊先生   我要評(píng)論
在使用CSS3動(dòng)畫(huà)時(shí)相信很多人都會(huì)接觸過(guò)animation，transition以及transform屬性。通過(guò) CSS3，我們能夠創(chuàng)建動(dòng)畫(huà)，這可以在許多網(wǎng)頁(yè)中取代動(dòng)畫(huà)圖片、Flash 動(dòng)畫(huà)以及 JavaScript——CSS3是世界上最可愛(ài)的語(yǔ)言

CSS3動(dòng)畫(huà)和JS動(dòng)畫(huà)的區(qū)別

JS 實(shí)現(xiàn)的是幀動(dòng)畫(huà)
CSS3 實(shí)現(xiàn)的是補(bǔ)間動(dòng)畫(huà)

  • 幀動(dòng)畫(huà)：使用定時(shí)器，每隔一段時(shí)間，更改當(dāng)前的元素
  • 補(bǔ)間動(dòng)畫(huà)： 過(guò)渡（加過(guò)渡只要狀態(tài)發(fā)生改變產(chǎn)生動(dòng)畫(huà)）動(dòng)畫(huà)(多個(gè)節(jié)點(diǎn)來(lái)控制動(dòng)畫(huà))性能會(huì)更好

transition

transition是一個(gè)簡(jiǎn)單的動(dòng)畫(huà)屬性，可以看作是是animation的簡(jiǎn)化版本，通常拿來(lái)配合事件觸發(fā)使用，簡(jiǎn)單易用

transition的屬性值

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

transition特性

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

<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 中寫(xiě) transition: width 1s 0.5s ease-in-out

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}

其實(shí)寫(xiě)在hover上也是可以的，但是當(dāng)我移出元素后，元素寬度立馬恢復(fù)，而沒(méi)有過(guò)渡！
原因很簡(jiǎn)單，你transistion只寫(xiě)在hover上，也就是說(shuō)只有鼠標(biāo)移上去的時(shí)候，該偽類(lèi)才生效

animation

animation的屬性值

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

當(dāng)鼠標(biāo)移入的時(shí)候暫停，移出的時(shí)候繼續(xù)變換顏色

transform

首先要注意的是transform屬性是靜態(tài)屬性，只要寫(xiě)進(jìn)style里就會(huì)直接顯示生效，不會(huì)出現(xiàn)動(dòng)畫(huà)過(guò)程
通過(guò)使用transform屬性，能夠?qū)υ剡M(jìn)行移動(dòng)（translate）、縮放（scale）、旋轉(zhuǎn)（rotate）、翻轉(zhuǎn)（skew），更多詳細(xì)參數(shù)可以參考CSS3 transform 屬性

總結(jié)

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

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

相關(guān)文章

最新評(píng)論