CSS-club – настройка внешнего вида сайта

CSS3 позволяет не только подкрашивать да перемещать блоки, но и добавлять ко всему этому добру различные анимации. И если постараться, можно даже сделать весьма сложные штуки.
Сейчас мы рассмотрим два варианта их создания.

Анимации эти могут запускаться как по событиям, так и просто при загрузке страницы.
Простая ситуация: какое-то визуальное изменение объекта при наведении на него курсором.
Рассмотрим на примере аватарки пользователя, которая настроена как круглая:

.p-profiles .profile-head .c-brief .avatar>img {
   border-radius: 50%;
}

И нам надо, чтобы она обратно становилась квадратной при наведении курсором. Окей, добавляем правило с псевдоклассом :hover

.p-profiles .profile-head .c-brief .avatar>img:hover {
   border-radius: 0;
}

Работает, но состояний всего два: круг и квадрат. Никакого перехода нет.
Добавить его поможет свойство transition.
Допустим, что нам нужно просто плавно в течении одной секунды поменять состояние:

.p-profiles .profile-head .c-brief .avatar>img {
   border-radius: 50%;
   transition: 1s;
}
.p-profiles .profile-head .c-brief .avatar>img:hover {
   border-radius: 0;
}

Если свойства перехода в обе стороны одинаковые, то достаточно указать свойство transition у основного элемента (как в примере), если же они должны быть разными, то указывайте каждому состоянию соответствующее значение свойства.
Готово, вы восхитительны!

Но что делать, если нам нужна постоянная и, возможно, нетривиальная анимация?
Тут то и начинается самое интересное: написание анимаций по ключевым кадрам.
Рассмотрим на примере всё той же аватарки и популярной сейчас штуки с покачиванием её вверх-вниз.
Сначала в директиве keyframes указываются название будущей анимации. Делается это таким образом:

@keyframes name {
from {/*начало анимации*/
  /*изменяемое свойство*/
}
50% { /*какой-то промежуточный этап*/
  /*изменяемое свойство*/  
}
to {/*конец анимации*/
  /*изменяемое свойство*/
}
}

Где name - название анимации, посредством которого в дальнейшем мы будем с ней работать. Тут можно писать что угодно, латиницей. Рекомендую придумать такое название, чтобы было понятно что эта анимация делает.
Промежуточных этапов может быть сколько душе угодно и в любом месте, не обязательно 50%. Проценты в данном случае - это прогресс выполнения, то есть 50% - это середина, 33.3333% - треть и т.п.
И вот нам, например, надо чтобы аватарка приподнималась вверх на, скажем, 10 пикселей, а потом опускалась обратно. Тут нам поможет свойство transform

@keyframes flyingavatar {
from {
   transform: translateY(0px);
}
50% {
   transform: translateY(-10px);
}
to {
   transform: translateY(0px);
}
}

К слову, если анимация должна закончиться в том же месте где началась, можно to не прописывать.
Окей, мы прописали ключевые кадр, что теперь с этим делать?
Теперь надо вызвать эту анимацию на нужном объекте свойством animation.
Допустим нам нужен период в 4 секунды, ну и бесконечность, конечно же.

.p-profiles .profile-head .c-brief .avatar>img {
   animation: flyingavatar 4s infinite;
}

Получилось не очень красиво, да? Недостаёт плавности.
Надо это исправить значением animation-timing-function.
Сделаем так, чтобы анимация боле плавно ускорялась в начале кадра и замедлялась в конце.

.p-profiles .profile-head .c-brief .avatar>img {
   animation: flyingavatar 4s ease-in-out infinite;
}

Вот теперь всё замечательно.

Почитай подробнее о свойствах по ссылкам, не стесняйся пробовать другие. В keyframes можно прописывать практически всё, что принимает числовые значения. Упомянутые приёмы можно совмещать, например добавлять свойство animation к правилу с псевдоклассом :hover.
Удачи в творчестве!