Сегодня разговор пойдет о такой загадочной теме, как анимация. В наше время она как нельзя более актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной CSS-анимации.
Анимация в CSS3
Анимация - это плавный переход элемента из одого состояния в другое с течением времени. И задать такое изменение теперь можно прямо в файле CSS. Если раньше приходилось для достижения этой цели писать довольно громоздкий код JavaScript (плюс этого метода в том, что данная анимация будет работать кроссбарузерно, то есть одинаково во всех браузерах), то сейчас мы можем описать анимацию в нескольких правилах CSS.
Что такое кейфрейм (keyframe)?
Для того, чтобы анимация работала необходимо использовать так называемые кейфреймы (keyframes) - "ключевые кадры", в переводе с английского.
Кейфрейм позволяет определить положение (состояние) элемента в определенный момент времени, кадра. Именно поэтому элемент становится анимированым, а создание кейфреймов - важная часть в создании анимации.
Как?
Анимация в CSS создается в два этапа: создание кейфреймов (keyframes) и использование их в правиле.
Давайте разберем по порядку.
Чтобы создать кейфрейм, необходимо прописать следующую конструкцию в CSS:
@keyframes name {
}
Внутри фигурных скобок мы, буквально, прописываем любое изменение элемента, то есть описываем действие кейфрейма. При помощи ключевых слов
После ключевых слов
Например, если мы хотим переместить элемент вправо с 50px на 450px, то наш код будет таковым:
@keyframes m {
from {
left: 50px;
}
to {
left: 450px;
}
}
Стоит отметить, что это только полдела. Чтобы анимация заработала, необходимо привязать созданный кейфрейм к селектору, который будет подчиняться данным изменениям. Позволят нам связать анимацию и элемент свойства animation-name и animation-duration, которые устанавливают, какому кейфрейму будет соответствовать данный элемент и сколько времени займет анимация.
Предположим, мы хотим применить данный эффект к блоку
@keyframes m {
from {
left: 50px;
}
to {
left: 450px;
}
}
.animate {
width: 50px;
height: 50px;
animation-name: m;
animation-duration: 1.5s /*После числа мы ставим "s" (секунды) или "ms" (миллисекунды), в зависимости от того, сколько времени потребуется на анимацию*/
}
Итог
Анимация CSS3 - довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу красивой, наполненной движением и эффектами. Разумеется, нам предстоит познакомиться с большим количеством настроек, поэтому - до встречи в следующей части статьи.
А тем временем, удачи вам в веб-разработках!