Сегодня разговор пойдет о такой загадочной теме, как анимация. В наше время она как нельзя более актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной CSS-анимации.
Анимация в CSS3
Анимация - это плавный переход элемента из одого состояния в другое с течением времени. И задать такое изменение теперь можно прямо в файле CSS. Если раньше приходилось для достижения этой цели писать довольно громоздкий код JavaScript (плюс этого метода в том, что данная анимация будет работать кроссбарузерно, то есть одинаково во всех браузерах), то сейчас мы можем описать анимацию в нескольких правилах CSS.
Что такое кейфрейм (keyframe)?
Для того, чтобы анимация работала необходимо использовать так называемые кейфреймы (keyframes) - "ключевые кадры", в переводе с английского.
Кейфрейм позволяет определить положение (состояние) элемента в определенный момент времени, кадра. Именно поэтому элемент становится анимированым, а создание кейфреймов - важная часть в создании анимации.
Как?
Анимация в CSS создается в два этапа: создание кейфреймов (keyframes) и использование их в правиле.
Давайте разберем по порядку.
Чтобы создать кейфрейм, необходимо прописать следующую конструкцию в CSS:
Внутри фигурных скобок мы, буквально, прописываем любое изменение элемента, то есть описываем действие кейфрейма. При помощи ключевых слов и мы даем браузеру понять, с какого свойства мы начинаем анимацию и каким свойством мы ее и окончим.
После ключевых слов и мы ставим фигурные скобки (открывающие и закрывающие, само собой). Именно здесь и начинается вся магия. В теле мы прописываем свойства, которые определяют элемет до анимации, а в теле - после анимации. Всё просто.
Например, если мы хотим переместить элемент вправо с 50px на 450px, то наш код будет таковым:
Стоит отметить, что это только полдела. Чтобы анимация заработала, необходимо привязать созданный кейфрейм к селектору, который будет подчиняться данным изменениям. Позволят нам связать анимацию и элемент свойства animation-name и animation-duration, которые устанавливают, какому кейфрейму будет соответствовать данный элемент и сколько времени займет анимация.
Предположим, мы хотим применить данный эффект к блоку (который, конечно же, заранее прописан в разметке). Тогда код стилей будет выглядить таким образом:
Итог
Анимация CSS3 - довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу красивой, наполненной движением и эффектами. Разумеется, нам предстоит познакомиться с большим количеством настроек, поэтому - до встречи в следующей части статьи.
А тем временем, удачи вам в веб-разработках!