課程
/前端開發
/HTML/CSS
/十天精通CSS3
backwards效果是讓delay時間變為0嗎?
2014-05-28
源自:十天精通CSS3 9-9
正在回答
@-webkit-keyframes redToBlue{ from{ background:red; } to{ background:blue; } } div { width: 200px; height: 200px; background: green; margin: 20px auto; } div:hover{ -webkit-animation-name:redToBlue; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-fill-mode:backwards; }
你可以對div設置hover才開始動畫試試看看呢(默認div顏色為綠色),都和none狀態相比吧,forwards會在動畫結束后一直停留在動畫的最后狀態;backwards會在鼠標懸浮div的時候直接開始動畫,沒有延遲(而且最后畫面也不是初始狀態而是綠色);both是forwards和backwards同時產生效果
不是,是定義動畫結束后,是什么狀態。初始狀態還是結束的狀態。backwards 是初始狀態。
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
3 回答
4 回答
1 回答
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-05-29
@-webkit-keyframes redToBlue{ from{ background:red; } to{ background:blue; } } div { width: 200px; height: 200px; background: green; margin: 20px auto; } div:hover{ -webkit-animation-name:redToBlue; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-fill-mode:backwards; }
2014-05-29
你可以對div設置hover才開始動畫試試看看呢(默認div顏色為綠色),都和none狀態相比吧,forwards會在動畫結束后一直停留在動畫的最后狀態;backwards會在鼠標懸浮div的時候直接開始動畫,沒有延遲(而且最后畫面也不是初始狀態而是綠色);both是forwards和backwards同時產生效果
2014-05-29
不是,是定義動畫結束后,是什么狀態。初始狀態還是結束的狀態。backwards 是初始狀態。