課程
/前端開(kāi)發(fā)
/HTML/CSS
/十天精通CSS3
我在15%加上了background變成綠色,我以為當(dāng)runing停止播放時(shí),會(huì)突然變回黃色,可是沒(méi)有變動(dòng),請(qǐng)問(wèn)原始應(yīng)該是什么時(shí)候的狀態(tài)?
2015-06-23
源自:十天精通CSS3 9-8
正在回答
既然用到了runing,那代碼肯定有animation-play-state:paused;,你應(yīng)該是hover的時(shí)候才running,當(dāng)你鼠標(biāo)移開(kāi)的時(shí)候并不會(huì)回到原始狀態(tài),而是因?yàn)閍nimation-play-state:paused二停留在當(dāng)前狀態(tài)。
原始狀態(tài),應(yīng)該是0%時(shí)的狀態(tài)
arlenhui 提問(wèn)者
你的問(wèn)題可以這樣解決,
span{
? display: inline-block;
? width: 20px;
? height: 20px;
? background: orange;
? transform: translateY(90px);
? animation-name: move;
? animation-play-state:paused;
}
div:hover span {
? animation-duration: 10s;
? animation-timing-function: ease-in;
? animation-delay: .2s;
? animation-iteration-count:infinite;
? animation-direction:alternate;
?animation-play-state:running;
舉報(bào)
本課程為CSS3入門(mén)教程,深刻詳解CSS3知識(shí)讓網(wǎng)頁(yè)穿上絢麗裝備
2 回答如果暫停了動(dòng)畫(huà)的播放,元素的樣式將回到最原始設(shè)置狀態(tài)
3 回答“另外如果暫停了動(dòng)畫(huà)的播放,元素的樣式將回到最原始設(shè)置狀態(tài)。”這句話沒(méi)太懂意思
2 回答將導(dǎo)航設(shè)置為水平的原理
5 回答動(dòng)畫(huà)的最終結(jié)果是停留在100%的狀態(tài)還是最初定義的狀態(tài)呢?
4 回答上面說(shuō)“:read-only”偽類(lèi)選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式,那么怎樣判斷元素是不是只讀的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢(xún)優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-04-19
既然用到了runing,那代碼肯定有animation-play-state:paused;,你應(yīng)該是hover的時(shí)候才running,當(dāng)你鼠標(biāo)移開(kāi)的時(shí)候并不會(huì)回到原始狀態(tài),而是因?yàn)閍nimation-play-state:paused二停留在當(dāng)前狀態(tài)。
原始狀態(tài),應(yīng)該是0%時(shí)的狀態(tài)
2018-08-21
你的問(wèn)題可以這樣解決,
如果暫停了動(dòng)畫(huà)的播放,元素的樣式將回到最原始設(shè)置狀態(tài)
span{
? display: inline-block;
? width: 20px;
? height: 20px;
? background: orange;
? transform: translateY(90px);
? animation-name: move;
? animation-play-state:paused;
}
div:hover span {
? animation-name: move;
? animation-duration: 10s;
? animation-timing-function: ease-in;
? animation-delay: .2s;
? animation-iteration-count:infinite;
? animation-direction:alternate;
?animation-play-state:running;
}