亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

animation和transition的區(qū)別

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

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

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

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

transition

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

transition的屬性值

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

transition特性

transition需用事件觸發(fā)【比如加個(gè)hover偽類】，不能在網(wǎng)頁加載時(shí)自動發(fā)生
一次性，不能重復(fù)發(fā)生，除非一再觸發(fā)
只有兩個(gè)狀態(tà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 中寫 transition: width 1s 0.5s ease-in-out

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

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

animation

animation的屬性值

屬性 描述
animation-name 用來調(diào)用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
animation-duration 規(guī)定動畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0
animation-timing-function 速度曲線，和transition-timing-function一樣，可用的類型有l(wèi)iner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定制
animation-delay 規(guī)定動畫何時(shí)開始，默認(rèn)是 0
animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1
animation-direction normal 默認(rèn)值，如果設(shè)置為normal時(shí)，動畫每次循環(huán)都是向前（即按順序）播放，alternate（輪流），動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放（animation-iteration-count取值大于1時(shí)設(shè)置有效）
animation-play-state running，可以通過該值將暫停的動畫重新播放，這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個(gè)位置開始播放，paused，暫停播放
animation-fill-mode 默認(rèn)情況下，動畫結(jié)束后，元素的樣式將回到起始狀態(tài)，animation-fill-mode屬性可以控制動畫結(jié)束后元素的樣式。主要具有四個(gè)屬性值：none（默認(rèn)，回到動畫沒開始時(shí)的狀態(tài)。），forwards（動畫結(jié)束后動畫停留在結(jié)束狀態(tài)），backwords（動畫回到第一幀的狀態(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)屬性，只要寫進(jìn)style里就會直接顯示生效，不會出現(xiàn)動畫過程
通過使用transform屬性，能夠?qū)υ剡M(jìn)行移動（translate）、縮放（scale）、旋轉(zhuǎn)（rotate）、翻轉(zhuǎn)（skew），更多詳細(xì)參數(shù)可以參考CSS3 transform 屬性

總結(jié)

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

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

相關(guān)文章

最新評論