CSS Transitions, Animations: общая информация

Мы разобрали практически всю верстку с точки зрения практичности: как сверстать гибкий интерфейс, адаптивный, как верстать сетками и flexbox, для чего нужны те или иные теги, стили, как задавать стили с помощью селекторов и так далее.

Теперь я хочу немного поговорить о таком явлении, как CSS Transitions и Animations. Эти вещи не относятся к верстке в привычном понимании, но они делаются с помощью CSS, поэтому их можно, в принципе, включить в цикл статей о верстке. Основной их смысл - "оживить" наш интерфейс, сделать его еще привлекательнее для пользователей, так сказать, произвести "вау эффект". Хотя есть и более "вауэффектные" ребята, но они уже идут со стороны JavaScript. Поэтому мы сконцентрируемся на CSS части. И чтобы лучше понять Transitions, сначала разберем такое понятие, как псевдоклассы.

Псевдоклассы CSS

Когда мы знакомились с CSS три месяца назад (очередное охеревание от скоротечности времени), мы познакомились с таким понятием, как селектор. Эта хрень отвечает за выборку тегов в HTML документе, к которым применятся стили внутри селектора:

.red-color {

  color: red; // селектор класса - задаст красный цвет тексту элементам с атрибутом class="red-color".

}

Но ведь все элементы на странице браузера не просто так присутствуют - с ними взаимодействует пользователь. Можете сами перечислить, какие действия он может совершать, если страница открыта в браузере с компьютера? Первое, что приходит в голову: нажатие, зажатие, наведение курсора. Кроме того, сами элементы в зависимости от ситуации могут иметь разное состояние: активные (active), доступные (enabled), недоступные (disabled) и так далее. Каким образом задать стили подобным элементам?

Для этого существуют так называемые псевдоклассы. Они указываются всегда рядом с селектором через двоеточие, то есть, без селектора смысла в псевдоклассах вообще нет:

#cutom-id:hover {

background-color: green;

}

Данный код задаст зеленый фон для элемента с атрибутом id="custom-id", только когда на него будет наведен курсор мыши.

Я не буду перечислять все псевдоклассы, так как это за меня уже сделал данный сайт. Я включил этот блок как основу для понимания интересного способа анимировать элементы - CSS Transitions.

CSS Transitions

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

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.

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

Что входит в CSS свойство "transition", какие свойства можно анимировать, что за функция по времени - все это подробнее разберем в следующей статье.

CSS Animations

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

Принцип анимирования здесь такой же, как и везде: вы представляете цикл анимации как последовательность ключевых кадров, и задаете CSS свойства на каждый кадр. Чем больше кадров вы опишите, тем плавнее и интереснее можно сделать анимацию.

Есть три преимущества CSS Animation перед традиционными способами:

1. Простота использования для несложных анимаций; вы можете создать анимацию, не зная JavaScript.
2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, могут работать через одно место.
3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя свою производительность и эффективность. Например, уменьшая частоту обновления кадров анимации во вкладках, которые в данный момент не просматриваются.

Что представляет из себя CSS свойство "animation", как описывать ключевые кадры, какие свойства можно анимировать - все это разберем в статье после CSS Transitions.

Итого

Мы кратко познакомились с такими понятиями, как псевдоклассы, CSS Transitions и CSS Animations. Чтобы вы могли анимировать переходы элементов из одного состояния в другое, во-первых, нужно знать, в какие состояния элемент в принципе может переходить (читайте про псевдоклассы), во-вторых, знать, как именно пользоваться CSS Transitions. Этим мы и займемся в следующей статье.

Что касается CSS Animations, они не привязывается к состояниям элементов, потому что в ней самой задаются эти состояния, используя ключевые кадры. Как именно работать с CSS Animations мы разберем сразу после CSS Transitions.