溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“分析CSS動(dòng)畫(huà)Transition與Animation”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“分析CSS動(dòng)畫(huà)Transition與Animation”吧!
| CSS3 | 差異 |
|---|---|
transition | 在給定的持續(xù)時(shí)間內(nèi)平滑地更改屬性值（從一個(gè)值到另一個(gè)值），也就是只需要指定開(kāi)始與結(jié)束的參數(shù)，參數(shù)改變時(shí)就觸發(fā)動(dòng)畫(huà)。 |
常用語(yǔ)鼠標(biāo)事件（:hover、active、:focus、:click）或鍵盤(pán)輸入時(shí)觸發(fā) | |
| 需要事件觸發(fā)，無(wú)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。一次性，不能重復(fù)發(fā)生，除非一再觸發(fā)。 | |
| 只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)。 | |
animation | 可以自行寫(xiě)動(dòng)畫(huà)開(kāi)始、進(jìn)行間、結(jié)束時(shí)各階段的變化，適合用來(lái)做較細(xì)微的動(dòng)畫(huà)表現(xiàn)。需要明確的指定關(guān)鍵幀（@keyframe）的參數(shù)。 |
| 網(wǎng)頁(yè)加載時(shí)會(huì)直接執(zhí)行，可以自行控制各階段動(dòng)畫(huà)的變化 |
animation和transition最大的不同在于transition是當(dāng)參數(shù)改變時(shí)觸發(fā)，而animation則是直接就執(zhí)行，所有動(dòng)畫(huà)效果需要明確的指定關(guān)鍵幀的參數(shù)。
| CSS3 | 簡(jiǎn)寫(xiě)順序 |
|---|---|
transition | property名稱(chēng)timing-function特效 |
animation | name名稱(chēng)timing-function特效 |
iteration-count次數(shù)fill-mode填充模式 |
transition寫(xiě)法.box {
width: 100px;
height: 100px;
background-color: purple;
transition: width 2s ease-in 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}animation寫(xiě)法.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
animation: change 5s; /*8個(gè)屬性中至少要有名稱(chēng)、時(shí)間*/
}
/*設(shè)定開(kāi)始與結(jié)束狀態(tài)*/
/*from 就是0%，to 就是100%*/
@keyframes change {
from {
background-color: #4BC0C8;
}
to {
background-color: #C779D0;
}
}.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
animation: change 5s; /*8個(gè)屬性中至少要有名稱(chēng)、時(shí)間*/
}
/*設(shè)定開(kāi)始與結(jié)束狀態(tài)*/
/*from 就是0%，to 就是100%*/
@keyframes change {
0% {
background-color: #4BC0C8;
}
20% {
background-color: #C779D0;
}
60% {
background-color: #FEAC5E;
}
80% {
background-color: #185a9d;
}
100% {
background-color: #4BC0C8;
}
}| 屬性 | 值 |
|---|---|
animation-name | @keyframes后的名稱(chēng) |
animation-duration時(shí)間 | time以秒計(jì)算，如3s initial預(yù)設(shè)值inherit繼承父層 |
animation-timing-function特效 | linear等速、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)可上官網(wǎng)取值使用 |
animation-delay | 以秒計(jì)算，如2s |
animation-iteration-count次數(shù) | number預(yù)設(shè)值為1，因此填2時(shí)，動(dòng)畫(huà)跑的次數(shù)為1+2=3次infinite無(wú)限循環(huán) |
animation-direction方向 | normal、reverse反向、alternate先反后正 |
animation-fill-mode | forwards使用關(guān)鍵幀最后的值backwards使用最開(kāi)始的值both |
animation-play-state播放狀態(tài) | pause暫停running為預(yù)設(shè)值initial預(yù)設(shè)值、inherit繼承父層 |
到此，相信大家對(duì)“分析CSS動(dòng)畫(huà)Transition與Animation”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼