Краткое введение в CSS-анимацию

Краткое введение в CSS-анимацию

От автора: как работает анимация CSS: работа со свойством animation, основной синтаксис, настройка параметров, примеры использования — об этом в статье.

Анимация CSS применяется к элементу с помощью свойства animation.

spin — это имя анимации, которое мы должны определить отдельно. Мы также указываем CSS выполнять анимацию последние 10 секунд, выполнять ее линейным образом (без ускорения или какой-либо разницы в скорости) и повторять ее бесконечно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Внутри определения @keyframes вы можете задать столько промежуточных точек, сколько захотите. В этом случае мы указываем CSS, чтобы свойство transform поворачивало ось Z от 0 до 360 градусов, завершая полный цикл. Вы можете использовать любое преобразование CSS.

Обратите внимание, что здесь не сказано ничего о временном интервале анимации. Это определяется, когда вы используете animation.

Пример CSS-анимации

Я хочу нарисовать четыре круга, все с общей исходной точкой, все повернутые на 90 градусов друг относительно друга.

Вы можете видеть их в этом блоке Glitch:

Давайте сделаем эту структуру (все круги) вращающимися. Для этого мы применяем к контейнеру анимацию, и определяем эту анимацию как поворот на 360 градусов:

Посмотрите сюда:

Вы можете добавить больше ключевых кадров для создания более интересной анимации:

Пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Свойства CSS-анимации

CSS-анимация предоставляет множество различных параметров, которые вы можете настроить:

animation-name — имя анимации, которое ссылается на анимацию, созданную с использованием ключевых кадров

animation-duration — как долго анимация должна длиться, в секундах

anim-timing-function — функция синхронизации, используемая анимацией (общие значения: linear, ease). По умолчанию: ease

animation-delay — необязательное количество секунд до начала анимации

animation-iteration-count — сколько раз анимация должна выполняться. Принимает число или infinite. По умолчанию: 1

animation-direction — направление анимации. Может быть normal, reverse, alternate или alternate-reverse. В последних 2 случаях чередуется вперед, а затем назад

animation-fill-mode — определяет, как задавать стили элемента, когда анимация заканчивается, после того, как закончится последняя итерация. None или backwards возвращают к стилям первого ключевого кадра. Forwards и both задают стили, установленные в последнем ключевом кадре

анимация-play-state — если установлено paused, приостанавливает анимацию. По умолчанию running.

Свойство animation является сокращением всех этих свойств в следующем порядке:

Это пример, который мы использовали выше:

События JavaScript для CSS-анимации

Используя JavaScript, вы можете прослушивать следующие события:

animationstart

animationend

animationiteration

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

Я написал книгу о Современной Fron-tend разработке, включающую разделы, посвященные React, Redux, GraphQL, современному CSS, Progressive Web Apps, Webpack, Babel, Service Workers, Fetch, Web Push Notifications и многому другому. Ознакомьтесь с ней!

Автор: Flavio Copes

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree