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

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

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

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

.container {
 animation: spin 10s linear infinite;
}

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

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

@keyframes spin {
 0% {
  transform: rotateZ(0);
 }
 100% {
  transform: rotateZ(360deg);
 }
}

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.circle {
 border-radius: 50%;
 left: calc(50% - 6.25em);
 top: calc(50% - 12.5em);
 transform-origin: 50% 12.5em;
 width: 12.5em;
 height: 12.5em;
 position: absolute;
 box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}
.one,
.three {
 background: rgba(142, 92, 205, .75);
}
.two,
.four {
 background: rgba(236, 252, 100, .75);
}
.one {
 transform: rotateZ(0);
}
.two {
 transform: rotateZ(90deg);
}
.three {
 transform: rotateZ(180deg);
}
.four {
 transform: rotateZ(-90deg);
}

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

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

@keyframes spin {
 0% {
  transform: rotateZ(0);
 }
 100% {
  transform: rotateZ(360deg);
 }
}
.container {
 animation: spin 10s linear infinite;
}

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

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

@keyframes spin {
 0% {
  transform: rotateZ(0);
 }
 25% {
  transform: rotateZ(30deg);
 }
 50% {
  transform: rotateZ(270deg);
 }
 75% {
  transform: rotateZ(180deg);
 }
 100% {
  transform: rotateZ(360deg);
 }
}

Пример:

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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 является сокращением всех этих свойств в следующем порядке:

.container {
  animation: name
 duration
 timing-function
 delay
 iteration-count
 direction
 fill-mode
 play-state;
}

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

.container {
 animation: spin 10s linear infinite;
}

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

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

animationstart

animationend

animationiteration

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

const container = document.querySelector('.container')
container.addEventListener('animationstart', (e) => {
 //делаем что-то
}, false)
container.addEventListener('animationend', (e) => {
 // делаем что-то
}, false)
container.addEventListener('animationiteration', (e) => {
 // делаем что-то
}, false)

Я написал книгу о Современной 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 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree