Быстрое поступление в CSS-анимацию

bystroe postuplenie v css animacziyu

Интересно изучать 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, .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 — название анимации, которая ссылается на анимацию, созданную с помощью ключевых кадров
  • продолжительность анимации сколько времени должна продолжаться анимация, в секундах
  • animation-timing-function функция синхронизации, используемая анимацией (общие значения: linear, ease). По умолчанию: легкость
  • анимация-задержка необязательное количество секунд для ожидания перед запуском анимации
  • animation-iteration-count сколько раз нужно выполнить анимацию. Ожидает число или бесконечность. По умолчанию: 1
  • анимация-режиссер направление анимации. Может быть обычным, обратным, альтернативным или альтернативно-обратным. В последних 2 он чередуется вперед, а затем назад
  • режим заполнения анимации определяет, как стилизовать элемент, когда анимация заканчивается, после того, как она заканчивает номер подсчета итераций. Нет или возвращается назад к стилям первого ключевого кадра. Вперед и оба используют стиль, установленный в последнем ключевом кадре
  • animation-play-state если установлено значение приостановлено, анимация приостанавливается. По умолчанию работает.

The 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

Будьте осторожны с 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

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

Ваш адрес email не будет опубликован.