從CSS3動畫

刪除的JavaScript在那一刻，我有一個這樣的風格：從CSS3動畫

.clip td{ 
    -webkit-transition: background-color 1000ms linear; 
    -moz-transition: background-color 1000ms linear; 
    -o-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
}

我再添加一個CSS類，然後使用setTimeout的去除類給人一種簡單的動畫漸變。

是否有可能實現沒有JavaScript的相同效果，並有一個完整的CSS解決方案？

來源

2014-11-05 dagda1

不同的動畫，但除此之外，它似乎是同樣的問題：簡單的CSS動畫循環 - 衰落 - 出「加載」文字]（http://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text） – GolezTrol 2014-11-05 21:40:20

你可以做一個工作代碼示例，其中包括您的JS？它是在某個事件或單擊時運行，還是在頁面加載後立即運行？ – CodingWithSpike 2014-11-05 21:40:56

使用CSS3動畫並使用它的delay和計時功能。如果頁面加載後不發生，您可能最終還是會使用JS來觸發動畫。

克里斯有一個很好的文章，以幫助你理解和編寫CSS3動畫：

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

來源

2014-11-05 21:44:59 Dominik

回答

相關問題