課程
/前端開發
/HTML/CSS
/十天精通CSS3
我在15%加上了background變成綠色，我以為當runing停止播放時，會突然變回黃色，可是沒有變動，請問原始應該是什么時候的狀態？
2015-06-23
源自：十天精通CSS3 9-8
正在回答
既然用到了runing,那代碼肯定有animation-play-state:paused;，你應該是hover的時候才running,當你鼠標移開的時候并不會回到原始狀態，而是因為animation-play-state:paused二停留在當前狀態。
原始狀態，應該是0%時的狀態
arlenhui 提問者
你的問題可以這樣解決，
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;
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態
3 回答“另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。”這句話沒太懂意思
5 回答動畫的最終結果是停留在100%的狀態還是最初定義的狀態呢？
2 回答將導航設置為水平的原理
4 回答上面說“:read-only”偽類選擇器用來指定處于只讀狀態元素的樣式，那么怎樣判斷元素是不是只讀的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-04-19
既然用到了runing,那代碼肯定有animation-play-state:paused;，你應該是hover的時候才running,當你鼠標移開的時候并不會回到原始狀態，而是因為animation-play-state:paused二停留在當前狀態。
原始狀態，應該是0%時的狀態
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;
}