Как добавить анимацию CSS к элементу на веб-странице?

Question

Я хочу добавить анимацию на ярлык на моей странице, чтобы «ускорить» загрузку страницы (отвлечь пользователя). Я бы хотел, чтобы мой ярлык h1 превращался в цвета радуги (ROYGBIV).

Каков самый простой способ выполнить это с помощью HTML и CSS?

Answer 1

Дайте ярлыку 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/