Анимация в CSS3. Часть I

Сегодня разговор пойдет о такой загадочной теме, как анимация. В наше время она как нельзя более актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной CSS-анимации.

Анимация в CSS3

Анимация - это плавный переход элемента из одого состояния в другое с течением времени. И задать такое изменение теперь можно прямо в файле CSS. Если раньше приходилось для достижения этой цели писать довольно громоздкий код JavaScript (плюс этого метода в том, что данная анимация будет работать кроссбарузерно, то есть одинаково во всех браузерах), то сейчас мы можем описать анимацию в нескольких правилах CSS.

Что такое кейфрейм (keyframe)?

Для того, чтобы анимация работала необходимо использовать так называемые кейфреймы (keyframes) - "ключевые кадры", в переводе с английского.

Кейфрейм позволяет определить положение (состояние) элемента в определенный момент времени, кадра. Именно поэтому элемент становится анимированым, а создание кейфреймов - важная часть в создании анимации.

Как?

Анимация в CSS создается в два этапа: создание кейфреймов (keyframes) и использование их в правиле.

Давайте разберем по порядку.

Чтобы создать кейфрейм, необходимо прописать следующую конструкцию в CSS:

@keyframes name {

}

Внутри фигурных скобок мы, буквально, прописываем любое изменение элемента, то есть описываем действие кейфрейма. При помощи ключевых слов from и to мы даем браузеру понять, с какого свойства мы начинаем анимацию и  каким свойством мы ее и окончим.

После ключевых слов from и to мы ставим фигурные скобки (открывающие и закрывающие, само собой). Именно здесь и начинается вся магия. В теле from мы прописываем свойства, которые определяют элемет до анимации, а в теле to - после анимации. Всё просто.

Например, если мы хотим переместить элемент вправо с 50px на 450px, то наш код будет таковым:

@keyframes m {
    from {
        left: 50px;
    }
    to {
        left: 450px;
    }
}

Стоит отметить, что это только полдела. Чтобы анимация заработала, необходимо привязать созданный кейфрейм к селектору, который будет подчиняться данным изменениям. Позволят нам связать анимацию и элемент свойства animation-name и animation-duration, которые устанавливают,  какому кейфрейму будет соответствовать данный элемент и сколько времени займет анимация.

Предположим, мы хотим применить данный эффект  к блоку .animate (который, конечно же, заранее прописан в разметке). Тогда код стилей будет выглядить таким образом:

@keyframes m {
    from {
        left: 50px;
    }
    to {
        left: 450px;
    }
}
.animate {
    width: 50px;
    height: 50px;
    animation-name: m;
    animation-duration: 1.5s /*После числа мы ставим "s" (секунды) или "ms" (миллисекунды), в зависимости от того, сколько времени потребуется на анимацию*/
}

Итог

Анимация CSS3 - довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу  красивой, наполненной движением и эффектами. Разумеется, нам предстоит познакомиться с большим количеством настроек, поэтому - до встречи в следующей части статьи.

А тем временем, удачи вам в веб-разработках!