本篇內(nèi)容主要講解“分析CSS動(dòng)畫Transition與Animation”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“分析CSS動(dòng)畫Transition與Animation”吧!
創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為瓜州等服務(wù)建站，瓜州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為瓜州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
| CSS3 | 差異 |
|---|---|
transition | 在給定的持續(xù)時(shí)間內(nèi)平滑地更改屬性值（從一個(gè)值到另一個(gè)值），也就是只需要指定開始與結(jié)束的參數(shù)，參數(shù)改變時(shí)就觸發(fā)動(dòng)畫。 |
常用語鼠標(biāo)事件（:hover、active、:focus、:click）或鍵盤輸入時(shí)觸發(fā) | |
| 需要事件觸發(fā)，無法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生。一次性，不能重復(fù)發(fā)生，除非一再觸發(fā)。 | |
| 只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)。 | |
animation | 可以自行寫動(dòng)畫開始、進(jìn)行間、結(jié)束時(shí)各階段的變化，適合用來做較細(xì)微的動(dòng)畫表現(xiàn)。需要明確的指定關(guān)鍵幀（@keyframe）的參數(shù)。 |
| 網(wǎng)頁加載時(shí)會(huì)直接執(zhí)行，可以自行控制各階段動(dòng)畫的變化 |
animation和transition最大的不同在于transition是當(dāng)參數(shù)改變時(shí)觸發(fā)，而animation則是直接就執(zhí)行，所有動(dòng)畫效果需要明確的指定關(guān)鍵幀的參數(shù)。
| CSS3 | 簡(jiǎn)寫順序 |
|---|---|
transition | property名稱timing-function特效 |
animation | name名稱timing-function特效 |
iteration-count次數(shù)fill-mode填充模式 |
重慶分公司
重慶分公司
transition寫法.box {
width: 100px;
height: 100px;
background-color: purple;
transition: width 2s ease-in 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}animation寫法.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
animation: change 5s; /*8個(gè)屬性中至少要有名稱、時(shí)間*/
}
/*設(shè)定開始與結(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è)屬性中至少要有名稱、時(shí)間*/
}
/*設(shè)定開始與結(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后的名稱 |
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)畫跑的次數(shù)為1+2=3次infinite無限循環(huán) |
animation-direction方向 | normal、reverse反向、alternate先反后正 |
animation-fill-mode | forwards使用關(guān)鍵幀最后的值backwards使用最開始的值both |
animation-play-state播放狀態(tài) | pause暫停running為預(yù)設(shè)值initial預(yù)設(shè)值、inherit繼承父層 |
到此，相信大家對(duì)“分析CSS動(dòng)畫Transition與Animation”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
