Учебник по CSS-анимации

• Вступление
• Пример CSS-анимации
• Свойства анимации CSS
• События JavaScript для анимации CSS
• Какие свойства можно анимировать с помощью анимации 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.

Обратите внимание, что это ничего не говорит о временном интервале, который должна занимать анимация. Это определяется, когда вы используете его через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, 0.5);
}
.one,
.three {
background: rgba(142, 92, 205, 0.75);
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(180deg);
}
.four {
transform: rotateZ(-90deg);
}

Вы можете увидеть их в этом глюке:https://glitch.com/edit/#!/flavio-css-circles

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

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

Смотрите это наhttps://glitch.com/edit/#!/flavio-css-animations-tutorial

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

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

См. Пример наhttps://glitch.com/edit/#!/flavio-css-animations-four-steps

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

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

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

.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

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

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Какие свойства можно анимировать с помощью анимации CSS

Много! Это то же самое, что вы можете анимировать с помощью переходов CSS.

Вот полный список:

Больше руководств по css:

• Руководство по Flexbox
• Учебник по CSS Grid
• Переменные CSS (настраиваемые свойства)
• Введение в PostCSS
• Свойство поля CSS
• Как центрировать элемент с помощью CSS
• Системные шрифты CSS
• Как напечатать HTML со стилем
• Вводное руководство по переходам CSS
• Учебник по CSS-анимации
• Введение в CSS
• Руководство по CSS
• Как настроить Tailwind с PurgeCSS и PostCSS
• Шпаргалка по попутному ветру
• Как непрерывно вращать изображение с помощью CSS
• Как сделать таблицу адаптивной с помощью CSS
• Как отлаживать CSS путем деления пополам
• Селекторы CSS
• CSS-каскад
• Специфика CSS
• Селекторы атрибутов CSS
• Цвета CSS
• Единицы CSS
• URL-адрес CSS ()
• CSS Типографика
• Коробочная модель CSS
• Свойство CSS position
• CSS Media Queries и адаптивный дизайн
• Запросы функций CSS
• CSS преобразования
• Как стилизовать списки с помощью CSS
• Префиксы поставщиков CSS
• Наследование CSS
• Псевдоклассы CSS
• Псевдоэлементы CSS
• Стилизация HTML-таблиц с помощью CSS
• Свойство CSS Display
• Функция CSS calc ()
• CSS Границы
• Импорт файла CSS с помощью @import
• Обработка ошибок CSS
• CSS фильтры
• CSS Размер окна
• CSS-фоны
• Комментарии CSS
• CSS шрифты
• CSS Padding
• CSS свойство float и очистка
• CSS нормализация
• Свойство CSS z-index
• Как отключить выделение текста с помощью CSS
• Как разместить элемент в нижней части контейнера с помощью CSS
• Как инвертировать цвета с помощью CSS
• Адаптивные предварительные теги в CSS
• Адаптивные вставки видео YouTube
• Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
• Как выровнять центр в flexbox