課程
/前端開發
/HTML/CSS
/十天精通CSS3
前面不是說暫停了之后再重新開始元素從暫停位置開始繼續動畫,樣式回到最初狀態?老師,麻煩給個實例參考下吧,沒想通。。。。
2014-12-31
源自:十天精通CSS3 9-8
正在回答
你的問題可以這樣解決,
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;
qq_慕蓋茨8361330
暫停有兩種方式,取不同的值效果不一樣,其中一種是暫停后,再播放時從停止狀態繼續開始,另外一個種是暫停后,再播放是從最初狀態開始。這個樣的示例,自己取值一試就明白。
雞仔煲綠豆沙
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答如果暫停了動畫的播放,元素的樣式將回到最原始設置狀態
3 回答元素的樣式將回到最原始設置狀態。原始設置狀態是指?
5 回答動畫的最終結果是停留在100%的狀態還是最初定義的狀態呢?
2 回答對暫停狀態的疑惑
2 回答FF46、IE11,如果元素沒有設置border,動畫里的border屬性就無效,bug?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-08-21
你的問題可以這樣解決,
如果暫停了動畫的播放,元素的樣式將回到最原始設置狀態
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;
}
2015-01-04
暫停有兩種方式,取不同的值效果不一樣,其中一種是暫停后,再播放時從停止狀態繼續開始,另外一個種是暫停后,再播放是從最初狀態開始。這個樣的示例,自己取值一試就明白。