如何將CSS動畫添加到網頁上的元素？

-1

我想爲我的頁面上的標籤添加動畫以「加速」頁面的加載（分散用戶的注意力）。我希望我的h1標籤能夠穿過彩虹的顏色（ROYGBIV）。如何將CSS動畫添加到網頁上的元素？

使用HTML和CSS完成此操作的最簡單方法是什麼？

2013-10-04 B. Clay Shannon

給你的H1標籤類，如「Rainbojangles」：

<h1 class="Rainbojangles">Award Winners Only</h1>

包括類在你的site.css（或其它CSS）文件：

.Rainbojangles { 
    color: white; 
    font-size: 2em; 
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important; 
    text-shadow: 4px 3px 6px #000000; 
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5); 
    display: inline; 
    padding-right: 10px; 

    animation-name: rainbowGlow; 
    animation-duration: 5s; 
    animation-delay: 2s; 
    -moz-animation: rainbowGlow 5s 1 linear; 
    -o-animation: rainbowGlow 5s 1 linear; 
    -webkit-animation: rainbowGlow 5s 1 linear; 
    animation: rainbowGlow 5s 1 linear; 
}

（第一部分類規則可以調整或刪除）;規則的動漫節是什麼是絕對需要）

動畫代碼添加到CSS文件：

@-webkit-keyframes rainbowGlow { 
from { 
     color: white; 
    } 
13% { 
     color: red; 
    } 
25% { 
     color: orange; 
    } 
38% { 
     color: yellow; 
    } 
50% { 
     color: green; 
    } 
63% { 
     color: blue; 
    } 
75% { 
     color: indigo; 
    } 
88% { 
     color: violet; 
    } 
to { 
     color: white; 
    } 
}

正如你所看到的，我開始有白色和回白色，但在兩者之間循環通過彩虹的顏色，給每個色相大致相等的「重量」。

注意，雖然，除了「@ -webkit-關鍵幀rainbowGlow」，您還需要使用相同的CSS：

@-moz-keyframes rainbowGlow 
@-o-keyframes rainbowGlow 
@keyframes rainbowGlow

...支持儘可能多的瀏覽器成爲可能。

在行動中看到這個CSS3動畫彩虹，檢查出來的http://www.awardwinnersonly.com/

來源

2013-10-04 16:51:38

你張貼的問題，後來就自己回答一下嗎？這只是爲了讓我們訪問您的網站？ – tremor

這實際上是堆棧溢出的一種預期用法，作爲一種提示存儲庫。 –

這是，但是你的問題是無關緊要的：「詢問代碼的問題必須顯示對所解決問題的最小理解，包括嘗試的解決方案，爲什麼他們不工作，以及預期的結果。」 – Pavlo

如何將CSS動畫添加到網頁上的元素？

回答

相關問題