Одно из главных нововведений css3 – анимация. Раньше для ее реализации нужно было использовать javascript, но это неудобно. Очень популярный тип анимаций в веб-разработке – при наведении на элемент. Проще всего рассмотреть ее создание на реальном примере.

Анимация при наведении на картинку в СSS

Предположим, есть задача заставить картинку с мячом на фоне газона крутиться по часовой стрелке при наведении на нее. Конечно, один раз можно повернуть ее и без анимации. А вот если реализовать это посредством анимации, то можно заставить картинку крутиться несколько раз, а также делать много других интересных вещей.
Реализовать поворот можно с помощью свойства transform: rotate. А сам код, позволяющий повернуть мяч, выглядит так:

@keyframes ball{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}

Строка 1 содержит обязательное ключевое слово @keyframes, которое говорит браузеру о том, что далее планируется анимация. Далее пишется название анимации. В нашем случае, это «ball». В фигурных скобках описывается последовательность кадров анимации.
Проценты – это точки остановки. Их можно сделать больше, чем две. Например, 0%, 25%, 50%, 75%, 100%. Причем необязательно число должно быть кратным 25%. А возле процента в фигурных скобках указывается тип анимации и число, характеризующее то, как она будет осуществляться.
В описанном примере 0% – точка начала анимации, а 100% – ее конец. То есть, сначала мяч не должен быть повернут (на 0 градусов), а под конец он должен вернуться на исходную точку (на 360 градусов).
Это блок создания анимации, но ее еще нужно применить к мячу. Для этого необходимо присвоить ему класс ball, и указать его в css:

animation-name: ball;
animation-duration: 1s;
animation-iteration-count: infinite;

Все это прописываем в селекторе .ball:hover. Именно он отвечает за стиль при наведении на объект. Первая строчка характеризует анимацию, которую создали. Вторая – длительность. А третья строчка указывает на количество итераций (повторов) анимации.
Теперь нужно сохранить html-файл и открыть его в браузере. После наведения мышью на картинку мяч должен крутиться. Если нет, что-то было сделано неправильно.

Анимация кнопки при наведении

Этот пример более приближен к реальности. Можно сделать кнопку, которая будет увеличиваться и уменьшаться при наведении курсором мыши на нее, и так до тех пор, пока он не будет уведен в сторону.

< input type="submit" value="Сделать заказ!">

Это HTML-код кнопки. В нашем случае это единственная кнопка, поэтому можно не прописывать ее класс или id.
Можно ее немного стилизовать, чтобы выглядела немного приличнее:

input[type=submit]{
    margin: 20px 50px;
    background: #2E5C8A;
    border: 2px solid #1C4354;
    padding: 25px;
    color: #fff;
    font-weight: bold;
}

В результате получится такой дизайн. Скромный, но симпатичный.

Анимация делается следующим образом:

@keyframes button{
    50%{transform: scale(1.5, 1.5)}
    100%{transform: scale(0.75, 0.75)}    
}

За масштабирование кнопки отвечает свойство transform:scale.
Поскольку стоит точка остановки 50% в строчке 2, то понятно, что к середине анимации кнопка должна стать больше в полтора раза, а под конец – уменьшиться.
Анимация связывается с кнопкой так же, как и в прошлом примере.

input[type=submit]:hover{
    animation-name: button;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

Важно помнить о необходимости дописать псевдокласс :hover, потому что именно он отвечает за анимацию элемента при наведении на объект.
Можно присвоить анимацию только определенному классу кнопок. Для этого нужно воспользоваться селектором .classname. Естественно, вместо classname нужно вставить имя класса, предварительно его присвоив в HTML. Можно сделать анимацию конкретной кнопки, указав селектор #id.

Анимация текста

Аналогично в CSS можно сделать анимацию текста с помощью псевдокласса hover:

@keyframes text{
    50%{transform: scale(1.5, 1.5)}
    100%{transform: scale(0.75, 0.75)}    
}

p:hover{
    animation-name: button;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

Применить анимацию можно и к любому другому блочному или строчному элементу. Текст может находиться в тегах span или div. В таком случае псевдокласс hover добавляется к тому тегу, который кодирует текст. Например, span:hover, div:hover и так далее.