Анимация фона на сайте через css

Давно искал как сделать анимация через css, и теперь делюсь с вами.
Все очень просто, нужно всего лишь прописать пару стилей.

Код:

@-webkit-keyframes raznoe {
      0% {background-color: #45CEEF;}
     25% {background-color: #FFF5A5;}
     50% {background-color: #FFD4DA;}
     75% {background-color: #99D2E4;}
     100% {background-color: #D8CAB4;}
}

body {
     background-color: #45CEEF;    
     -webkit-animation: raznoe 10s infinite alternate;

}

Где:
1) "raznoe" - просто название для функции.
2) background-color - меняющая функция, в нашем случае фон, можно ставить что угодно: граница, размер шрифта, цвет и прочее.
3) 5 шагов процентов - можно уменьшить или увеличить. Количество меняющихся функций и их шаг.
4) 10s - время, за которое все функции работают. Можно делать меньше - будет мигать чаще, если увеличить - будет плавнее переходить.

В примере сделал для фона. Теперь давайте пропишем для какого-нибудь блока. Или лучше сделаем для участка текста меняющийся фон.
Полный код будет выглядеть вот так:

Код:

@-webkit-keyframes raznoe {
      0% {color: #45CEEF;}
     25% {color: #FFF5A5;}
     50% {color: #FFD4DA;}
     75% {color: #99D2E4;}
     100% {color: #D8CAB4;}
}

.tagil {
  font-weight:bold;
     color: #45CEEF;    
     -webkit-animation: raznoe 10s infinite alternate;

}

Живой пример можете посмотреть здесь: Анимация на jsfiddle
Может кому нужно какое-то другое свойство - спрашиваем

 

Привет, есть проблема. Как лучше написать анимацию? Надо, чтобы серпантин сыпался с неба. Пару штук я могу сделать, но когда надо делать сотни таких объектов, возникает трудность.

 

Как угодно, можно на js, можно стилями.