Css animate: CSS Animations — CSS | MDN

animation-fill-mode — CSS | MDN

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;



animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none

Стили анимации не будут применены к элементу до и после её выполнения.

forwards

По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями  animation-direction и animation-iteration-count:

animation-direction	animation-iteration-count	последний ключевой кадр
normal	любое	100% или to
reverse	любое	0% или from
alternate	чётное	0% или from
alternate	нечётное	100% или to
alternate-reverse	чётное	100% или to
alternate-reverse	нечётное	0% или from

backwards

Элемент сохранит стиль первого ключевого кадра на протяжении периода animation-delay. Первый ключевой кадр определяется значением animation-direction:

animation-direction	первый ключевой кадр
normal или alternate	0% или from
reverse или alternate-reverse	100% или to

both

Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

Формальный синтаксис

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div>
  <div>Этот просто растёт</div>
  <div>Этот растёт и остаётся большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
} 

BCD tables only load in the browser

Transitions vs Animations — CSS Animation

При анимации в сети, ты используешь transition (переходы) или animation (анимации)? Бывают случаи, когда ты предпочитаешь выбрать один вместо другого. Давай поговорим о различиях.

Что такое Transitions?

Переход возникает, когда элемент переходит от одного состояния к другому, и браузер выполняет в этом состоянии изменения с последовательностью в заданных промежутках между кадрами. Есть начальное и конечное состояние.

В большинстве случаев мы видим состояния переходов, которые используются при наведении курсора мыши или когда информацию на страницу добавляем/удаляем. С помощью hover могут быть мелкие изменения в цвете шрифта, а информация на странице может то постепенно исчезать, то появляться.

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

Когда использовать

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

Переход будет работать хорошо, когда кто-то навет мышку/нажмет на кнопку:

Shiny effect

Или при добавлении элемента на страницу:

Add a list item

Что такое Animations?

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

Если transition устанавливает переход  только от А до B, то animation может и A, и B, и C и даже D. Или любое другое количество этапов по мере необходимости. 

Animations добивается этого с помощью набора ключевых кадров (keyframes). Если переход может быть определен одной строкой в классе, то анимация работает посредством ссылки на набор ключевых кадров(@keyframes), которые описаны отдельно в CSS.

Когда использовать

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

Например: нужна анимация на странице, которая начинает работать по прошествии определенного периода времени, как этот эффект мигания персонажа Baymax:

Кроме того анимация может быть лучшим выбором в случае, если элемент должен двигаться по нескольким местам на странице. Например таких как: инструкция наложения с курсором из различных областей на экране.

Иногда это не очевидно

В недавним посте начал с анимации, но затем стал использовать transitions.

Когда я начала разрабатывать эти часы, стрелки у меня должны были беспрерывно двигаться начиная с загрузки. Это был наглядный пример для использования свойства animation. Анимация начиналась после загрузки и должна была продолжаться бесконечно.  Когда я начал усложнять, то я обнаружил, что имеет смысл сделать с помощью JavaScript.

По мере использования JavaScript, становилось понятно что с выбором ошибся и transitions лучше подходит. Когда JavaScript изменяет положение стрелки, CSS transition обрабатывает изменение (из состояния А в состояние В) более элегантно, чем при помощи анимации.

Чтобы получить больше информации кликни по уроку CSS часы.

Заключение

Transition для создания плавного перехода от одного состояния к другому, а animation для более сложной последовательности серии передвижений.

Как правило, transition легче создавать и управлять им, а также использовать у большинства случаев. Если нужно больше контроля над анимированным элементом через серию шагов (этапов) или если при анимации необходимо начать после загрузки, то анимация с ключевыми кадрами(@keyframes) вполне более предпочтительна.

animation-delay | htmlbook.ru

Internet Explorer	Chrome	Opera		Safari	Firefox		Android	iOS
10.0+	3.0+	12.0+	12.10+	4.0+	5.0+	16.0+	3.0+	2.0+

Краткая информация

Версии CSS

Описание

Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name.

Синтаксис

animation-delay: <время>[, <время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-delay</title>
  <style>
   @-webkit-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-moz-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-o-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   .flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    /* Задержка перед началом */
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
   }
  </style>
 </head>
 <body>
  <h2>Добро пожаловать!</h2>
 </body>
</html>
  

Объектная модель

[window.]document.getElementById(«elementID»).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay.

все параметры анимации — учебник CSS

Итак, мы с вами рассмотрели восемь разных свойств для CSS-анимации. Если записать каждое из них в отдельной строке, да еще и не забыть про вендорные префиксы, то в общей сложности получится более 30 строк кода для одной анимации!

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

div {
    animation-name: coolAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-delay: 500ms;
    animation-iteration-count: 6;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* Стиль выше эквивалентен следующему: */

div {
    animation: coolAnimation 3s ease-in 500ms 6 reverse forwards paused;
}

Конечно же, нет необходимости использовать каждое из восьми свойств анимации, ведь обязательными являются только два — animation-name и animation-duration. И если вам нужно добавить третий параметр (к примеру, animation-iteration-count), вы можете сделать следующую запись:

div {
    animation: coolAnimation 3s 6;
}

Если нужно применить к элементу сразу несколько анимаций и задать им разные настройки, то каждую группу значений следует отделять запятой, а в конце поставить точку с запятой:

div {
    animation: firstAnimation 300ms ease-in,
               secondAnimation 1s linear alternate;
}

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

animation-direction | CSS справочник

Поддержка браузерами

12.0+	10.0+	16.0+	43.0+	30.0+	9.0+

Описание

CSS свойство animation-direction указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.

Если значение свойства animation-direction установлено как «alternate», анимация будет проигрываться как «normal» каждый нечетный раз (1,3,5 и тд) и как реверс каждый четный раз (2,4,6 и тд).

Если в настройках анимации установлено проигрывание только однажды, это свойство не будет иметь эффекта.

Значение по умолчанию:	normal
Применяется:	ко всем элементам и псевдо-элементам ::before и ::after
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.animationDirection=»alternate»

Синтаксис

animation-direction: normal|reverse|alternate|alternate-reverse;

Значения свойства

Значение	Описание
normal	После прохождения полного цикла анимация сбрасывается в начальное состояние и начинается заново.
reverse	Анимация воспроизводится в обратном направлении, то есть каждый раз анимация начинает свое воспроизведения со своей конечной точки, проходит весь цикл и начинается заново.
alternate	После прохождения полного цикла анимация изменяет свое направление на противоположное. При воспроизведении в обратном направлении все шаги анимации выполняются наоборот.
alternate-reverse	Анимация начинает воспроизводится в обратном направлении, потом меняя свое направление на противоположное.

Пример

div#myDIV {
animation-direction:normal;
}

CSS Animations — описание и примеры использования

Что такое CSS Animations?

Уже довольно давно поддержка анимированных эффектов на web-страницах осуществлялась либо за счет средств HTML (пресловутый тег blink и marquee), либо, если надо было добиться чего-то большего — при помощи комбинирования CSS и JavaScript. Кроме того, оставались варианты с Flash и SVG. Однако все последние варианты достаточно сложны (требуют программирования), и предъявляют определенные требования к платформе (Flash, мало того, что «тормозит» и «зависает», так еще и не дружит с iOS).

Но около 2-х лет назад в рамках W3C было предложено дополнить спецификацию CSS 3 еще двумя модулями — CSS Animations и CSS Transitions. При помощи CSS Animations и CSS Transitions можно задать, скажем, начальное и конечное состояние объекта и способ перехода от одного состояния к другому. И вот, с выходом 5-й версии Firefox, уже можно сказать, что существенная часть современных браузеров поддерживает CSS-анимацию. Собственно говоря, кроме браузеров на движке Gecko выше 2.0 (Firefox 5, SeaMonkey 2.2), это браузеры на движке WebKit 53x (Safari 4, Chrome). Таким образом, учитывая сложившиеся тенденции, уже в ближайшее время свыше половины пользователей будут иметь программы просмотра веб-страниц, поддерживающие CSS animation/transition (последний, кстати был реализован еще раньше — в Safari 3 и Firefox 4).

Различие между CSS Animations и CSS Transitions состоит в том, что Animations представляет больше возможностей по управлению трансформацией объекта. Правда, при этом, опять-таки потребуется применение сценариев JavaScript. Иначе говоря, Animations — для программистов, а Transitions — для всех. Скажем, если вам нужно просто сделать кнопку, плавно меняющую цвет фона при наведении мышки, то можно ограничиться Transitions. Если же надо добиться более сложного выполнения — скажем, определить число повторов, а так же способ возвращения к исходной позиции между циклами, либо определить ключевые кадры (keyframes), то следует использовать Animations.

Всего в CSS3 предусмотрено 8 свойств для CSS-анимации (перечислены в таблице ниже) и объединяющее свойство animation для перечисления сразу нескольких параметров (подобно border, background и т.п.).

Свойства CSS Animations

Свойство	Допустимые значения	Описание
animation-delay	(время)	Определяет задержку между появлением элемента на странице (загрузкой) и началом анимации. Чаще всего определяется в секундах (s).
animation-direction	normal | alternate	Определяет, должна ли анимация при каждой итерации начинаться со стартовой позиции (normal) или возвращаться к стартовой позиции, выполняя с обратном порядке все указанные эффекты (alternate).
animation-duration	(время)	Указывает продолжительность одного цикла (обычно в секундах — s)
animation-iteration-count	infinite | (число)	Определяет число повторов циклов анимации. Если указано infinite (принято по умолчанию), то анимация будет происходить бесконечно, если же указано число, то повторится указанное число раз.
animation-name	строка-идентификатор	Задает имя @-правила keyframe, в котором описаны параметры анимации.
animation-play-state	running | paused	Позволяет «ставить на паузу» выполнение анимации (paused) и запускать её снова (running).
animation-timing-function	ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1,x2,x3,x4)	Определяет то, должно ли быть ускорение/замедление выполнения анимационного эффекта в начале и/или конце.
animation-fill-mode	none | forwards | backwards | both	Определяет порядок применения определенных в @keyframes стилей к объекту — до анимации (backwards), после анимации (forwards), в обоих крайних позициях (both), или же не следует их применять вообще (none, по умолчанию).
animation	—	Короткий вариант синтаксиса (объединяет animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction)

Следует учитывать, что вплоть до текущего момента CSS Animation является экспериментальным свойством, а спецификация CSS3 по нему имеет статус Working Draft (черновик). Поэтому в бразуерах оно поддерживается с префиксом -webkit- (для Chrome/Safari) и -moz- (для Firefox/SeaMonkey). То же самое касается и дескриптора @keyframes.

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

h3 { background: yellow; /* начальное значение */ -moz-animation-name: blinked; /* имя используемого @-правила анимации */ -moz-animation-duration: 2s; /* продолжительность эффекта - 2 секунды */ -moz-animation-iteration-count: infinite; /* повторять бесконечно */ -moz-animation-direction: alternate; /* при повторе постепенно возвращаться к начальному состоянию */ /* далее - все то же самое для Chrome и Safari */ -webkit-animation-name: blinked; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } /* правило для браузеров Mozilla */ @-moz-keyframes blinked { to {background: green;} } /* правило для браузеров Chrome и Safari */ @-webkit-keyframes blinked { to {background: green;} }

Таким образом, любой заголовок h3, имеющийся на странице, для которой определена такая таблица стилей, будет постепенно изменять цвет своего фона с желтого на зеленый и обратно в браузерах Firefox 5, Safari 4 и Chrome 3 или выше. Во всех остальных он будет постоянно на желтом фоне.

А теперь усложним задачу: пусть заголовок выезжает из нижней части экрана и двигается наверх, при этом изменяя свой цвет с зеленого на желтый. Для этого нам надо, во-первых, установить абсолютное позиционирование элемента, а во-вторых — задать значения top для начального и конечного кейфреймов. Так же следует изменить число повторов с бесконечности на 1, увеличить продолжительность анимации до, скажем, 5 секунд и удалить за ненадобностью определение вида повтора. В итоге мы получаем следующее:

h3 { background: yellow; /* начальное (и конечное) значение */ position: absolute; top: 1%; -moz-animation-name: blinked; /* имя используемого @-правила анимации */ -moz-animation-duration: 5s; /* продолжительность эффекта - 5 секунд */ -moz-animation-iteration-count: 1; /* выполнить 1 раз */ -webkit-animation-name: blinked; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: 1; } @-moz-keyframes blinked { from { top: 99%; background: green; } to { top: 1%; background: yellow; } } /* правило для браузеров Chrome и Safari */ @-webkit-keyframes blinked { from { top: 99%; background: green; } to { top: 1%; background: yellow; } }

Теперь разберемся с паузой. Пусть наша CSS-анимация приостанавливается, если пользователь «поймает» указателем мышки заголовок в момент его перемещения. Для этого можно воспользоваться псевдоклассом hover для h3, в котором надо будет определить animation-play-state:

h3:hover { -moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */ -webkit-animation-play-state: paused; }

До этого момента мы определяли только начальное и конечное значения. Но вся прелесть CSS Animations (в отличие от Transitions) состоит в том, что можно указывать промежуточные положения. Определяют их в процентах от времени выполнения. Так, пусть наш заголовок после того, как поднимется вверх, переедет на пол экрана вправо. Тогда надо определить нужные положения в соответствующие моменты. Так, раз наш «ролик» длится 5 секунд, то на поднятие выделим 4 секунды, а на перемещение вправо — 1. Соответственно, это составляет 80% и 20% от 5 секунд. Получаем для Firefox:

@-moz-keyframes blinked { from { top: 99%; left: 0%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } }

Для Chrome – аналогично. Однако, проблема в том, что после завершения анимции блок «скачком» вернется влево, на свою начальную позицию. Решить эту проблему можно двумя способами. Во-первых, можно указать left: 50% в основном определении для h3. Кроме того, состояние объекта до и после анимации можно контролировать при помощи animation-fill-mode. По-хорошему, надо бы использовать оба этих способа. Ну а если мы хотим. Чтобы выполнение анимации началось не сразу, а через секунду после загрузки страницы, до следует указать это при помощи свойства animation-delay. В результате мы получим следующий CSS-код:

h3 { background: yellow; /* начальное (и конечное) значение */ position: absolute; top: 1%; -moz-animation-name: blinked; /* имя используемого @-правила анимации */ -moz-animation-duration: 5s; /* продолжительность эффекта - 5 секунд */ -moz-animation-iteration-count: 1; /* выполнить 1 раз */ -moz-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */ -moz-animation-fill-mode: both; /* применить определенные в @-правила к объекту и до и после анимации */ -webkit-animation-name: blinked; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */ -webkit-animation-fill-mode: both; } h3:hover { -moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */ -webkit-animation-play-state: paused; } @-moz-keyframes blinked { from { top: 99%; left: 0%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } } @-webkit-keyframes blinked { from { top: 99%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } }

Остается рассмотреть последнее свойство — animation-timing-function. Оно определяет скорость выполнения эффекта при помощи кривых Безье. При этом можно как использовать функцию cubic-bezier, устанавливая свои значения, так и использовать один из 5 пресетов:

• ease соответствует cubic-bezier(0.25, 0.1, 0.25, 1.0).
• linear соответствует cubic-bezier(0.0, 0.0, 1.0, 1.0).
• ease-in соответствует cubic-bezier(0.42, 0.0, 1.0, 1.0).
• ease-out соответствует cubic-bezier(0.0, 0.0, 0.58, 1.0).
• ease-in-out соответствует cubic-bezier(0.42, 0.0, 0.58, 1.0).

Чтобы лучше разобраться, попробуйте установить для -moz-animation-timing-function и -webkit-animation-timing-function те или иные значения. В результате скорость выполенения будет то возрастать в начале и уменьшаться в конце, то наоборот. Указывать эти свойства можно как в общем определении, так и для отдельный кейфреймов. Например:

from { top: 99%; left: 0%; background: green; -moz-animation-timing-function: linear; }

В итоге подъем заголовка будет происходить с равной скоростью, без постепенного замедления, как задается в принятом по умолчанию ease.

2011-07-12 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

easy-animation-css — npm

Property EasyAnimation

EasyAnimation.

prefix

Устанавливает префикс для классов: …-enter, …-enter-active, …-enter-to, …-leave, …-leave-active, …-leave-to.

Methods EasyAnimation

EasyAnimation.

transition(element[, callback = null])

element — DOMelement, над котором будет производиться скрытие или показ, в зависимости от состояния CSS свойства display. Если none — показ, если block — скрытие.

callback — Функция, которая будет вызываться когда анимация начнется и закончится.

EasyAnimation.

transitionInsert(targetInsert, newElement[, before = null[, callback = null]])

targetInsert — DOMelement, в который будет вставляться новый элемент.

newElement — Новый элемент, который нужно вставить.

before — DOMelement, перед которым нужно вставить.

callback — Функция, которая будет вызываться когда анимация начнется и закончится.

EasyAnimation.

transitionRemove(element[, callback = null])

element — DOMelement, который нужно удалить.

callback — Функция, которая будет вызываться когда анимация начнется и закончится.

callback

Функция, которая вызывается в начале и конце анимаций.

Всегда вызывется с одним аргументом objectOptions.

Property objectOptions

element — DOMelement, над которым производится или производилась анимация.

type — Тип действия которое производится или производилось.

• show — Когда элемент показывается
• hide — Когда элемент скрывается
• insert — Когда элемент вставляется
• remove — Когда элемент удаляется

when— Время вызова функции.

• before — До начала анимации
• after — После конца анимации

related — true, если текущая анимация прервала прошлую, на этом элементе.

CSS-переходов и анимации наведения, интерактивное руководство

Мир веб-анимации превратился в бескрайние джунгли инструментов и технологий. Библиотеки, такие как GSAP и Framer Motion и React Spring, появились, чтобы помочь нам добавить движение в DOM.

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

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

Целевая аудитория

Это руководство предназначено для разработчиков с любым уровнем опыта. Его можно рассматривать как «CSS-переходы 101». Тем не менее, я добавил несколько интересных и малоизвестных лакомых кусочков — независимо от вашего уровня опыта, держу пари, вы чему-то научитесь!

Главный компонент, который нам нужен для создания анимации, — это изменяющийся CSS.

Вот пример кнопки, которая перемещается при наведении курсора, без анимации :

В этом фрагменте кода используется псевдокласс : hover , чтобы указать дополнительное объявление CSS, когда указатель мыши находится поверх нашей кнопки, аналогично onMouseEnter событие в JavaScript.

Чтобы сдвинуть элемент вверх, мы используем преобразование : translateY (-10px) . Хотя для этого мы могли бы использовать margin-top , преобразование : перевод — лучший инструмент для этой работы.Позже мы увидим почему.

По умолчанию изменения в CSS происходят мгновенно. В мгновение ока наша кнопка телепортировалась на новое место! Это несовместимо с миром природы, где все происходит постепенно.

Мы можем указать браузеру интерполировать из одного состояния в другое с метко названным свойством transition :

transition может принимать несколько значений, но требуются только два:

1. Имя свойства, которое мы хотим анимировать

2. Продолжительность анимации

Если вы планируете анимировать несколько свойств, вы можете передать его в виде списка, разделенного запятыми:

  Выбор всех свойств  
  transition-property  принимает особое значение:  все .Когда  все  указаны, любое изменяемое свойство CSS будет перенесено. 
 
 Может возникнуть соблазн использовать это значение, поскольку оно экономит нам много времени при вводе при анимации нескольких свойств, но  я рекомендую не использовать его.  
 
 По мере развития вашего продукта вы (или кто-то из вашей команды), вероятно, в какой-то момент в будущем обновите этот код. Неожиданная анимация могла проскользнуть. 
 
 Анимация похожа на соль: слишком много ее портит блюдо.Стоит быть действительно точным с анимируемыми свойствами. 
 
 Когда мы говорим элементу перейти из одной позиции в другую, браузеру необходимо определить, как должен выглядеть каждый «промежуточный» фрейм. 
 
 Например: предположим, что мы перемещаем элемент слева направо в течение 1 секунды. Плавная анимация должна работать со скоростью 60 кадров в секунду *, что означает, что нам нужно придумать 60 отдельных позиций между началом и концом. 
 
 Давайте начнем с того, что они будут равномерно распределены: 
 
 Щелкните меня! 
 
 Чтобы прояснить, что здесь происходит: каждый блеклый кружок представляет момент времени.Когда круг перемещается слева направо, это кадры, которые были показаны пользователю. Это как флипбук. 
 
 В этой анимации мы используем линейную функцию синхронизации  . Это означает, что элемент движется в постоянном темпе; наш круг перемещается на одинаковую величину каждый кадр. 
 
 В CSS доступно несколько функций времени. Мы можем указать, какой из них мы хотим использовать со свойством  transition-timer-function : 
 
 
 Или мы можем передать его напрямую в сокращенное свойство  transition : 
 
 
  linear  редко бывает лучшим выбором в конце концов, в реальном мире почти ничего не движется в эту сторону *.Хорошая анимация имитирует мир природы, поэтому мы должны выбрать что-то более органичное! 
 
 Давайте пробежимся по нашим вариантам. 
 
 
  
 Ссылка на эту товарную позицию 
 легкость выхода  
  легкость выхода  врывается, как дикий бык, но у него заканчивается энергия. В конце концов, он корчит, как сонная черепаха. 
 
 Попробуйте прокрутить по временной шкале; обратите внимание, насколько резким является движение в первых нескольких кадрах и насколько оно становится незаметным к концу. 
 
 Если бы мы изобразили смещение элемента во времени, это выглядело бы примерно так: 
 
  Когда вы использовали бы  смещения ?  Чаще всего используется, когда что-то поступает за пределами экрана (например,модальное появление). Создается впечатление, что что-то ворвалось издалека и останавливается перед пользователем. 
 
 
  
 Ссылка на эту товарную позицию 
 easy-in  
  easy-in  неудивительно, что это противоположность  easy-out . Он запускается медленно и ускоряется: 
 
 Как мы видели,  easy-out  полезен для вещей, которые попадают в поле зрения вне экрана.  easy-in , естественно, пригодится для обратного: перемещения чего-либо за пределы области просмотра.
 
 Эта комбинация полезна, когда что-то входит и выходит из области просмотра, например, из модального окна. Вскоре мы рассмотрим, как смешивать и согласовывать функции синхронизации. 
 
 Обратите внимание, что  easy-in  в значительной степени полезно исключительно для анимаций, которые заканчиваются закадровым или невидимым элементом; в противном случае резкая остановка может вызвать раздражение. 
 
 
  
 Ссылка на данную товарную позицию 
 легкость входа-выхода  
 Далее,  легкость входа-выхода . Это комбинация двух предыдущих функций синхронизации: 
 
 Эта функция синхронизации является симметричной  .У него равное количество ускорений и замедлений. 
 
 Я считаю эту кривую наиболее полезной для всего, что происходит в цикле (например, когда элемент постепенно появляется и исчезает, снова и снова). 
 
 Это большой шаг вперед по сравнению с  linear , но перед тем, как вы начнете использовать его во всем, давайте рассмотрим еще один вариант. 
 
 Если бы у меня была своя точка зрения от авторов языка CSS, когда дело доходит до переходов, так это то, что  легкость  плохо названа. Это совсем не описательно; буквально все функции тайминга в той или иной степени являются облегчениями! 
 
 Если не считать придирки,  easy  просто потрясающе.В отличие от   с легкостью вставки и извлечения, он несимметричен; он имеет кратковременное ускорение и замедление  лота . 
 
   легкость  — значение по умолчанию  — если вы не укажете функцию синхронизации, будет использоваться  легкость . Честно говоря, мне это кажется правильным.  easy  — отличный вариант в большинстве случаев. Если элемент перемещается, но не входит в область просмотра и не выходит из нее, обычно хорошим выбором будет  легкость . 
  Время постоянно  
 Важное замечание обо всех этих демонстрациях:  время постоянно .Функции синхронизации описывают, как значение должно переходить от 0 до 1 за фиксированный интервал времени, а не , а , как быстро должна завершиться анимация. Некоторые функции синхронизации могут казаться быстрее или медленнее, но в этих примерах все они выполняются ровно за 1 секунду. 
 
 
  
 Ссылка на этот заголовок 
 Пользовательские кривые  
 Если предоставленные встроенные параметры не соответствуют вашим потребностям, вы можете определить свою собственную кривую плавности, используя функцию синхронизации кубической кривой Безье! 
 
 
 Все значения, которые мы видели до сих пор, на самом деле являются просто предустановками для этой функции  кубической кривой Безье .Требуется 4 числа, представляющих 2 контрольные точки. 
 
 Кривые Безье действительно хороши, но они выходят за рамки этого руководства. Но я скоро напишу о них больше! 
 
 А пока вы можете начать создавать свои собственные временные функции Безье, используя этот замечательный помощник от Lea Verou: 
 
 Как только вы придумаете кривую анимации, которая вас устраивает, нажмите «Копировать» вверху и вставьте ее в ваш CSS! 
 
 Вы также можете выбрать из этого расширенного набора функций синхронизации.Но будьте осторожны: некоторые из наиболее диковинных опций не работают в CSS. 
 
 Начиная с пользовательских кривых Безье, может быть трудно придумать кривую, которая кажется естественной. Однако после некоторой практики это невероятно выразительный инструмент  . 
  Мне пора прийти в себя  
 Я должен признаться: приведенные выше демонстрации, демонстрирующие различные функции синхронизации, были преувеличены. 
 
 По правде говоря, временные функции, такие как  easy-in , более тонкие, чем изображено, но я хотел подчеркнуть эффект, чтобы облегчить понимание.Это стало возможным благодаря функции синхронизации  кубической кривой Безье ! 
 Показать еще   
 Ранее мы упоминали, что анимация должна работать со скоростью 60 кадров в секунду. Однако когда мы проводим вычисления, мы понимаем, что это означает, что у браузера есть только 16,6 миллисекунды для рисования каждого кадра. На самом деле времени совсем немного; для справки, моргание занимает около 100-300 мсек! 
 
 Если наша анимация слишком затратна в вычислительном отношении, она будет казаться рывкой и заиканием. Рамки будут выпадать, так как устройство не успевает.
 
 Убедитесь в этом сами, настроив новый элемент управления «Число кадров в секунду»: 
 
 На практике низкая производительность часто проявляется в виде  переменной частоты кадров , так что это не идеальная симуляция. 
 
 Анимация — это удивительно глубокая и интересная область, выходящая далеко за рамки этого вводного руководства. Но давайте рассмотрим абсолютно важные, важные моменты: 
 
 
 
 Некоторые свойства CSS анимировать намного дороже, чем другие.Например, высота   — очень дорогое свойство, поскольку оно влияет на макет. Когда высота элемента уменьшается, это вызывает цепную реакцию; всем его братьям и сестрам также нужно будет подняться, чтобы заполнить пространство! 
 
 
 
 Другие свойства, такие как  background-color , анимировать довольно дорого. Они не влияют на макет, но требуют свежего слоя краски на каждой раме, что недешево. 
 
 
 
 Два свойства —  преобразовать  и непрозрачность   — очень дешево для анимации.Если анимация в настоящее время настраивает свойство, например  width  или  left ,  можно значительно улучшить , переместив его в  transform  (хотя не всегда можно добиться того же эффекта). 
 
 
 
 Обязательно протестируйте анимацию на самом низком устройстве, на которое нацелен ваш сайт / приложение. Ваша машина разработки, вероятно, во много раз быстрее ее. 
 
 
 
 Если вам интересно узнать больше о производительности анимации, я выступал на эту тему на React Rally.Он углубляется в эту тему: 
  
 
  
 Ссылка на этот заголовок 
 Аппаратное ускорение  
 В зависимости от вашего браузера и ОС вы могли заметить любопытное небольшое несовершенство в некоторых из предыдущих примеров: 
 
  Pay close внимание к буквам.  Обратите внимание, как они выглядят слегка глючными в начале и в конце перехода, как будто все встало на свои места? 
 
 Это происходит из-за переключения между CPU и GPU компьютера.Позволь мне объяснить. 
 
 Когда мы анимируем элемент с помощью преобразования   и непрозрачности  , браузер иногда пытается оптимизировать эту анимацию. Вместо того, чтобы растрировать пиксели в каждом кадре, он передает все на графический процессор в виде текстуры. Графические процессоры очень хорошо справляются с подобными преобразованиями на основе текстур, и в результате мы получаем очень гладкую и очень производительную анимацию. Это известно как «аппаратное ускорение». 
 
 Вот проблема: графические процессоры и процессоры визуализируют  несколько по-разному.Когда центральный процессор передает его графическому процессору, и наоборот, вы видите, как все немного сдвигается. 
 
 Мы можем решить эту проблему, добавив следующее свойство CSS: 
 
 
  will-change  — это свойство, которое позволяет нам намекать браузеру, что мы собираемся анимировать выбранный элемент и что он должен оптимизировать для этот случай. 
 
 На практике это означает, что браузер позволяет графическому процессору обрабатывать этот элемент  все время . Больше никаких переключений между процессором и графическим процессором, никакой контрольной «фиксации на месте».
 
  will-change  позволяет нам целенаправленно определять, какие элементы следует аппаратно ускорять. У браузеров есть своя непостижимая логика вокруг этого материала, и я бы не хотел оставлять это на волю случая. 
 
 Есть еще одно преимущество аппаратного ускорения: мы можем воспользоваться преимуществом рендеринга субпикселей  . 
 
 Посмотрите эти две анимации ниже. Один выполняется с использованием  с верхним краем , поэтому он не может быть аппаратно ускорен. Заметили разницу между ними? 
 
 Свойства, такие как  margin-top , не могут выполнять субпиксельную визуализацию, что означает, что их необходимо округлять до ближайшего пикселя, создавая ступенчатый, резкий эффект. transform , тем временем, может плавно переключаться между пикселями благодаря уловке сглаживания графического процессора. 
  Компромиссы  
 Ничто в жизни не дается бесплатно, и аппаратное ускорение — не исключение. 
 
 Передав отрисовку элемента графическому процессору, он будет потреблять больше видеопамяти, а этот ресурс может быть ограничен, особенно на мобильных устройствах более низкого уровня. 
 
 Это не такая большая проблема, как раньше — я провел несколько тестов на Xiaomi Redmi 7A, популярном бюджетном смартфоне в Индии, и, похоже, он работает нормально.Только не применяйте широко  будет менять  к элементам, которые не двигаются. Обдумайте, где вы его используете. 
  Альтернативные свойства  
 Аппаратное ускорение существует уже давно — фактически, дольше, чем свойство  изменит свойство ! 
 
 В течение долгого времени это выполнялось с помощью трехмерного преобразования, такого как  transform: translateZ (0px) . Даже со значением 0px браузер по-прежнему передает его графическому процессору, поскольку перемещение в трехмерном пространстве определенно является сильной стороной графического процессора.Также есть  backface-visibility: hidden . 
 
 Когда вышел  will-change , он должен был дать разработчикам правильный, семантически значимый способ намекнуть браузеру, что элемент следует оптимизировать. Однако вначале у  были проблемы с заменой . 
 
 К счастью, похоже, что все эти проблемы были решены. Я провел некоторое тестирование и обнаружил, что получаю лучшие результаты в современных браузерах с  будет заменять .Но вы всегда должны проводить собственное тестирование, чтобы убедиться, что эти методы работают на целевых устройствах и браузерах. 
 
 
  
 Ссылка на этот заголовок 
 Движение, управляемое действием  
 Давайте еще раз взглянем на нашу поднимающуюся кнопку «Hello World». 
 
 Hello World 
 
 В его нынешнем виде у нас есть «симметричный» переход — анимация входа такая же, как и анимация выхода: 
 
 
   
 При наведении курсора мыши на элемент он смещается вверх на 10 пикселей. 250 мс 
 
 
   
 Когда мышь отодвигается, элемент смещается вниз на 10 пикселей за 250 мс 
 
 
 
 Маленькая милая деталь — дать каждому действию собственные настройки перехода.Для анимации наведения мне нравится делать анимацию входа быстрой и быстрой, в то время как анимация выхода может быть немного более расслабленной и вялой: 
 
 Другой распространенный пример — модальные окна. Для модальных окон может быть полезно входить с анимацией  с легкостью выхода  и выходить с более быстрой анимацией  с легкостью в : 
 
 Это небольшая деталь, но она говорит о гораздо большей идее. 
 
 Я считаю, что большинство разработчиков думают в терминах  состояний : например, вы можете посмотреть на эту ситуацию и сказать, что у нас есть состояние «зависания» и состояние по умолчанию.Вместо этого, что, если бы мы думали о  действиях ? Мы анимируем, основываясь на том, что делает пользователь, думая в терминах событий, а не состояний. У нас есть анимация ввода мыши и анимация выхода мыши. 
 
 Тобиас Алин показывает, как эта идея может создавать семантически значимые анимации следующего уровня в своем сообщении в блоге Meaningfun Motion with Action-Driven Animation. 
 
 
  
 Ссылка на этот заголовок 
 Задержки  
 Что ж, мы довольно далеко продвинулись в своем стремлении овладеть переходами CSS, но есть пара заключительных деталей, о которых стоит рассказать.Поговорим о задержках перехода. 
 
 Я считаю, что почти каждый уже сталкивался с этим разочаровывающим опытом раньше: 
 
  Изображение любезно предоставлено Беном Каменсом  
 
 Как разработчик, вы, вероятно, можете понять, почему это происходит: раскрывающийся список остается открытым только при наведении курсора! Когда мы перемещаем мышь по диагонали для выбора дочернего элемента, наш курсор выходит за пределы, и меню закрывается. 
 
 Эту проблему можно решить довольно элегантным способом, не прибегая к JS.Мы можем использовать  transition-delay ! 
 
 
  transition-delay  позволяет нам сохранять статус-кво в течение короткого промежутка времени. В этом случае, когда пользователь перемещает указатель мыши за пределы  .dropdown-wrapper , в течение 300 мс ничего не происходит. Если их мышь повторно входит в элемент в пределах этого 300-миллисекундного окна, переход никогда не происходит. 
 
 По прошествии 300 мс переход   срабатывает нормально, и выпадающий список исчезает через 400 мс. 
  Почему без стенографии?  
 До сих пор мы использовали сокращение  transition  для объединения всех наших значений, связанных с переходом. transition-delay  также можно использовать с сокращением: 
 
 Показать еще   
 
  
 Ссылка на этот заголовок 
 Мерцание гибели  
 Когда элемент перемещается вверх или вниз при наведении курсора, мы должны быть очень осторожны. не вводите случайно «мерцание обреченности»: 
 
  Предупреждение:  Этот GIF-файл содержит мерцающие движения, которые потенциально могут вызвать припадки у людей с светочувствительной эпилепсией. 
 Reveal 
 Вы могли заметить похожий эффект на некоторых демонстрациях на этой странице! 
 
 Неполадка возникает, когда мышь приближается к границе элемента.Эффект наведения выводит элемент из-под мыши, что заставляет его снова падать под мышкой, что вызывает повторное срабатывание эффекта наведения… много раз в секунду. 
 
 Как решить эту проблему? Уловка состоит в том, чтобы отделить триггер   от эффекта  . Вот краткий пример: 
 
 У нашего    теперь есть новый дочерний элемент,  .background . Этот диапазон содержит все косметические стили (цвет фона, шрифт и т. Д.).
 
 Когда мы наводим курсор мыши на обычную кнопку, это заставляет ребенка выглядывать сверху. Но кнопка остается неподвижной. 
 
  Попробуйте раскомментировать контур  , чтобы увидеть, что именно происходит!  
 
 Когда я вижу в сети хорошо созданную анимацию, я реагирую с восторгом и ликованием. Однако люди разные, и у некоторых людей наблюдается очень разная реакция: тошнота и недомогание. 
 
 Я уже писал ранее о соблюдении «предпочитает уменьшенное движение», настройки уровня ОС, которые пользователи могут переключать, чтобы выразить предпочтение меньшему движению.Давайте применим эти уроки здесь, отключив анимацию для людей, которые ее запрашивают: 
 
 
 Эта небольшая настройка означает, что анимация будет разрешена немедленно для пользователей, которые вошли в свои системные настройки и установили флажок. 
 
 Как разработчики внешнего интерфейса, мы несем определенную ответственность за то, чтобы наши продукты не причиняли вреда. Это быстрый шаг, который мы можем предпринять, чтобы сделать наши сайты / приложения более дружелюбными и безопасными. 
 
 CSS-переходы фундаментальны, но это не значит, что они легкие.В них есть удивительная глубина; даже в этом длинном сообщении в блоге мне пришлось вырезать некоторые вещи, чтобы сохранить управляемость! 
 
 Веб-анимация важнее, чем думает большинство разработчиков. Единственный переход здесь или там не сделает и не испортит впечатление, но он складывается. В целом хорошо выполненная анимация может оказать удивительно глубокое влияние на общее впечатление пользователя. 
 
 Переходы могут сделать приложение «реальным». Они могут предлагать обратную связь и общаться более интуитивно, чем просто копировать.Они могут научить людей пользоваться вашими продуктами. Они могут вызвать радость. 
 
 Если вам понравилось это руководство, возможно, вам будет приятно узнать, что  Я создаю курс CSS ! Мой курс специально создан для разработчиков JavaScript, и это комплексный курс с нуля, который научит вас быть уверенным и бесстрашным с помощью CSS. 
 
 Он построен на том же стеке технологий, что и этот блог, поэтому имеет тот же стиль встроенных интерактивных виджетов, но идет еще дальше.В моем курсе есть видео, мини-игры, мастер-классы и многое другое. 
 
 Вы можете узнать больше на официальном сайте CSS для разработчиков JavaScript. 
 
 Наконец, ни одно интерактивное занятие не обходится без «режима песочницы»! Поиграйте со всеми предыдущими настройками (и парой новых!) И создайте генеративное искусство с помощью этого открытого виджета: 
 Timing Functionlineareaseease-inease-outease-in-outease (supercharged) easy-in (supercharged) easy-out ( с наддувом) легкость входа (с наддувом) overshotShapeCircleSquare 
 Ghost Opacity 
 
 Анимация — попутный ветер CSS 
 
 Spin 
 
 Добавьте утилиту  animate-spin  для добавления линейной анимации вращения к таким элементам, как индикаторы загрузки.
 
 Ping 
 
 Добавьте утилиту  animate-ping , чтобы масштабировать элемент и исчезать, как пинг радара или рябь воды — полезно для таких вещей, как значки уведомлений. 
 
 Pulse 
 
 Добавьте утилиту  animate-pulse , чтобы элемент плавно появлялся и исчезал — полезно для таких вещей, как загрузчики скелетов. 
 
 Bounce 
 
 Добавьте утилиту  animate-bounce , чтобы элемент подпрыгивал вверх и вниз — полезно для таких вещей, как индикаторы «прокрутки вниз».
 
 Предпочитает-уменьшенное движение 
  
 Вы можете условно применять анимацию и переходы, используя варианты  motion-safe  и  motion-reduce : 
 
  
  
  Обработка
  
  Эти варианты не включены по умолчанию , но вы можете включить их в разделе  вариантов  файла  tailwind.config.js :
 
модуль.экспорт = {
  
  варианты: {
    анимация: ['отзывчивый', 'безопасный при движении', 'уменьшение движения']
  }
}  
 Подробнее читайте в документации государственных вариантов.
 Адаптивный 
 Чтобы изменить или отключить анимацию в определенной точке останова, добавьте префикс  {screen}:  к любой существующей утилите анимации. Например, используйте  md: animate-none , чтобы применить утилиту  animate-none  только при средних размерах экрана и выше.
  

  
  
 Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.
 Настройка 
 Анимации по самой своей природе, как правило, сильно зависят от проекта.  Анимации, которые мы включаем по умолчанию, лучше всего рассматривать как полезные примеры , и вам предлагается настроить анимацию в соответствии с вашими потребностями.
 По умолчанию Tailwind предоставляет утилиты для четырех различных примеров анимации, а также утилиту  animate-none . Вы изменяете, добавляете или удаляете их, настраивая раздел  анимации  конфигурации вашей темы.
 
  module.exports = {
    тема: {
      продлевать: {
        animation: {
+ 'spin-slow': 'вращать 3 секунды линейно бесконечно',
        }
      }
    }
  }  
 Чтобы добавить новую анимацию  @keyframes , используйте раздел  ключевых кадров  конфигурации вашей темы:
 
  module.exports = {
    тема: {
      продлевать: {
        ключевые кадры: {
+ wiggle: {
+ '0%, 100%': {transform: 'rotate (-3deg)'},
+ '50% ': {transform:' rotate (3deg) '},
+}
        }
      }
    }
  }  
 Затем вы можете ссылаться на эти ключевые кадры по имени в разделе  анимации  конфигурации вашей темы:
 
  модуль.экспорт = {
    тема: {
      продлевать: {
        animation: {
+ wiggle: 'покачивание 1s, легкость входа-выхода бесконечна',
        }
      }
    }
  }  
 Дополнительные сведения о настройке темы по умолчанию см. В документации по настройке темы.
 Варианты 
 По умолчанию для утилит анимации создаются только адаптивные варианты.
 Вы можете контролировать, какие варианты создаются для утилит анимации, изменяя свойство  animation  в разделе  вариантов  вашего попутного ветра .config.js  файл.
 Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:
 
  module.exports = {
    варианты: {
      продлевать: {
        
+ анимация: ['hover', 'focus'],
      }
    }
  }  
 24 креативных и уникальных примера анимации CSS, которые вдохновят вас 
 Будь то улучшение кнопки, сокращение времени загрузки страницы или добавление некоторой изюминки к целевой странице, анимация — эффективный способ удерживать внимание и восхищать зрителей на вашем сайте.
 Хотя есть несколько способов добавить анимированную графику на веб-страницу, одним из самых простых является использование анимации CSS, для реализации которой не требуется ничего, кроме некоторых ноу-хау HTML и CSS.
 Если вы хотите добавить в свою работу CSS-анимацию, может быть полезно сначала взглянуть на некоторые успешные применения CSS-анимации, прежде чем углубляться в нее. Это дополнительное исследование может вдохновить ваши собственные проекты и дать представление о том, чего вы можете достичь с помощью эта мощная функция.
 Вот почему мы собрали наши любимые примеры CSS-анимации из CodePen — онлайн-инструмента для создания и обмена фрагментами кода в HTML и CSS — чтобы помочь творческим сокам течь.
 Но сначала краткий обзор обсуждаемой темы …
 Как работает CSS-анимация? 
 CSS-анимация — это функция CSS, которая позволяет анимировать изменение одного или нескольких свойств стиля элемента, а также управлять различными аспектами анимации. Анимация на чистом CSS не требует дополнительного кода (например, JavaScript) или мультимедиа (например, GIF) — все делается с помощью HTML и CSS.
 CSS-анимация
 отлично подходит для веб-сайтов, которые хотят добавлять динамический, интересный контент, не придавая странице большого веса.Поскольку они не требуют дополнительных скриптов, CSS-анимация вряд ли замедлит ваши страницы.
 Для создания CSS-анимации вам понадобятся три вещи: элемент HTML для анимации, правило CSS, которое привязывает анимацию к этому элементу, и группа ключевых кадров, определяющая стили в начале и в конце анимации. Вы также можете добавить объявления для дальнейшей настройки вашей анимации, например скорости и задержки.
 Для демонстрации приведем простой пример CSS-анимации:
 См. Пример CSS-анимации пера Кристины Перриконе (@hubspot) на CodePen.
 В этом примере 
  — это элемент, который мы анимируем. Глядя на CSS, мы видим, что наши объявления анимации связаны с селектором  div . Самым важным объявлением здесь является  animation-name , который привязывает ключевой кадр  my-animation  к нашему элементу  div . Ниже приведены несколько дополнительных объявлений, которые влияют на время и поведение анимации.
 Сама анимация создается с помощью ключевого кадра, указанного правилом  @keyframes .Ключевой кадр определяет начальное состояние анимации (внутри  от {} ) и ее конечное состояние (от  до {} ). Ключевой кадр  my-animation  изменяет три свойства стиля нашего div:  background-color ,  width  и  top . Когда эти три свойства анимируются одновременно, получается связная анимация.
 В нашем примере у нас только один ключевой кадр. Документы с несколькими типами анимации могут иметь несколько ключевых кадров, каждый из которых привязан к разному элементу.
 Примеры анимации CSS 
 Ниже мы собрали 24 примера CSS-анимации, начиная от базовых эффектов взаимодействия и заканчивая настоящими произведениями искусства (по крайней мере, на мой взгляд). Не стесняйтесь использовать их для вдохновения в своих проектах.
 1. CSS Эффект перехода при наведении курсора мыши 
 Начиная с света, эта анимация показывает простой, но эффективный эффект выделения текста, запускаемый при наведении курсора мыши. Это отличный способ добавить изюминку ссылкам на ваших страницах.
 См. Эффект перехода от мыши при выводе курсора CSS от Адама Аргайла (@argyleink) на CodePen.
 Посмотреть код можно здесь.
 2. Простые загрузочные блесны 
 CSS-анимации можно использовать для создания эффектов, которые всем нам знакомы — эти вращающиеся значки загрузки являются одним из таких примеров. Их значение понимают почти все, и они также не разбираются в коде. В этом конкретном примере также показано, как добиться аналогичного эффекта с помощью масштабируемой векторной графики.
 См. Pen Simple HTML & SVG Loading Spinners Стивена Делани (@sdelaney) на CodePen.
 Посмотреть код можно здесь.
 3. Анимация прокрутки текста 
 Еще один отличный способ улучшить ваш текст, этот фрагмент кода применяет эффект, похожий на игровой автомат, который вращает слова в поле зрения и из поля зрения. Это распространенный метод на веб-сайтах, которые должны демонстрировать универсальность своих творений. Является ли ваш продукт эффективным, удобным и экологичным? Вставьте эти слова в анимацию, подобную этой.
 См. Анимацию Pen Text от Йоанна (@yoannhel) на CodePen.
 Посмотреть код можно здесь.
 4. Анимированная кнопка отправки 
 Пользователи ценят небольшие неожиданные моменты восхищения, которые сообразительные дизайнеры любят разбрасывать на своих веб-страницах. Эта кнопка отправки представляет собой простой и приятный способ предоставить визуальную обратную связь, указывающую, что действие было завершено, например, отправка формы.
 См. Чистую CSS-анимацию кнопки отправки пера от Dead Pixel (@dead_pixel) на CodePen.
 Посмотреть код можно здесь.
 5.Адаптивный логотип 
 Обратите внимание на логотип в правом нижнем углу пера ниже — эта анимация накладывает легкую анимацию при наведении курсора мыши. Это еще одна визуальная подсказка для пользователей, которая делает навигацию по вашему сайту более приятной.
 См. Шаблон пера: логотип Алекса Каца (@katzkode) на CodePen.
 Посмотреть код можно здесь.
 6. Открывающий конверт 
 Один из моих любимых примеров, эта элегантная анимация уделяет пристальное внимание деталям. От движения вниз при открытии конверта до деталей на бумаге и тени под ним становится ясно, как небольшие штрихи складываются в одну плавную, связную анимацию.Из этого получится отличная анимация кнопки или прокрутки.
 См. Кнопку Mail с анимацией пером на CSS от Джейка Джайлса-Филлипса (@jakegilesphillips) на CodePen.
 Посмотреть код можно здесь.
 7. Горячий кофе 
 Приведенный ниже фрагмент демонстрирует, как простая анимация может продолжаться. В этом случае применение CSS-анимации к переводу, масштабированию и исчезновению непрозрачности добавляет жизни обычному рисунку.
 См. Pen Hot Coffee Зейна Уэсли (@zanewesley) на CodePen.
 Посмотреть код можно здесь.
 8. Кофеварка 
 Мы любим наш кофе, так что вот еще один. В этом случае анимация не отвлекает внимание. Скорее, он дополняется тщательным дизайном вокруг него, чтобы сделать весь элемент более захватывающим.
 См. Анимацию Pen Coffee Machine на чистом CSS от Энрике Родригеса (@hjdesigner) на CodePen.
 Посмотреть код можно здесь.
 9. Покачивание кнопки 
 Нужно привлечь пользователя к определенному действию? Вместо цветной вспышки или модального окна рассмотрите возможность добавления к кнопке необычного эффекта покачивания.Это дружелюбный, но эффективный способ привлечь внимание, не показавшись навязчивым и не нарушая поток посетителей.
 Посмотрите, как покачивается кнопка «Сохранить пером» Донована Хатчинсона (@donovanh) на CodePen.
 Посмотреть код можно здесь.
 10. Pacman 
 Я не рекомендую размещать это на вашем сайте из-за риска нарушения авторских прав, но в любом случае на него интересно смотреть.
 См. Pen Pacman Риккардо (@Ferie) на CodePen.
 Посмотреть код можно здесь.
 11. Загрузка трех точек 
 Еще один пример CSS-анимации, создающей эффект загрузки, с которым многие из нас знакомы. Достаточно простого изменения масштаба, чтобы сказать: «Подождите, пожалуйста».
 См. Загрузчик CSS Pen с точками от Алексея Петерсона (@petersonby) на CodePen.
 Посмотреть код можно здесь.
 12. Ящики для файлов 
 Чтобы оживить ваше меню, подумайте о чем-то вроде ящиков файлов на чистом CSS ниже. Его шкафы слегка открываются при наведении курсора мыши, помогая вашей основной системе навигации выделяться среди других.
 См. Ящики Pen Pure CSS ʕ ノ • ᴥ • ʔ ノ ︵ ┻━┻ от Jhey (@ jh4y) на CodePen.
 Посмотреть код можно здесь.
 13. Цветной веер 
 Этот следующий пример особенно хорошо работает для бизнес-сайтов, ориентированных на дизайн — попробуйте анимировать цветовые палитры, чтобы создать эффект разветвления, и измените положение вещей с обычных цветных квадратов.
 См. Цветовую палитру пера с анимацией на чистом CSS от Нитиша Хагвала (@nitishkmrk) на CodePen.
 Посмотреть код можно здесь.
 14.Тумблер 3D 
 Переключатель включения / выключения — один из основных элементов дизайна пользовательского интерфейса. В этом примере концепция демонстрирует трехмерное вращение с плавной анимацией переключения состояния. Здесь разработчик изменил элемент ввода флажка CSS во что-то гораздо более интересное.
 См. Тумблер пера с отверстием для ручки от Джона Кантнера (@jkantner) на CodePen.
 Посмотреть код можно здесь.
 15. Подводная лодка 
 CSS хорошо подходит для плоских красочных иллюстраций и анимации.Приведенный ниже код сочетает в себе несколько эффектов для рисования — откровенно говоря — очаровательной подводной лодки. Единственное изменение, которое я бы предложил, — сделать его желтым.
 См. Pen Submarine с CSS от Альберто Хереса (@ajerez) на CodePen.
 Посмотреть код можно здесь.
 16. Анимированный текст заголовка при наведении курсора 
 В примере «Эффект наведения курсора для заголовков» Оливии Нг исследуется несколько способов придать динамичности тексту заголовка. Он показывает, как всего пара ключевых кадров может поднять ваши заголовки.
 См. Эффект наведения пера для заголовков, автор Оливия Нг (@oliviale) на CodePen.
 Посмотреть код можно здесь.
 17. Плавающее изображение 
 «Плавающий» эффект — это тонкое, простое и эффективное использование анимации CSS. В данном случае он используется для отображения значка с отличными результатами.
 См. Плавающую анимацию пера — CSS Марио Дуарте (@MarioDesigns) на CodePen.
 Посмотреть код можно здесь.
 18. Астронавт 
 Вот еще одно умное использование эффекта парения в паре с дружественной иллюстрацией из неземного мира.Еще один пример тонкого эффекта анимации CSS для улучшения восприятия элемента страницы.
 См. Pen Pure Css Astronaut, анимированный художником-программистом (@ Coding-Artist) на CodePen.
 Посмотреть код можно здесь.
 19. Минимальный кот 
 В этом примере разумно используется отрицательное пространство в сочетании с некоторыми своевременными анимациями CSS. Это простой дизайн, который передает много индивидуальности только с помощью свойства CSS transform.
 См. Анимацию кошки Pen Pure CSS от Йохана Моучета (@johanmouchet) на CodePen.
 Посмотреть код можно здесь.
 20. Растущие / усадочные стержни 
 CSS можно использовать для анимации визуализаций и более эффективной передачи результатов. Этот пример демонстрирует, как цвета и скорость могут создавать различные ощущения для динамических гистограмм — анимация CSS позволяет вам изменять скорость и количество повторений в ваших анимациях.
 Смотрите игру с логотипом ручки Дэна Педдла (@dazld) на CodePen.
 Посмотреть код можно здесь.
 21. Laser Tag 
 Признаюсь, это один из наиболее сложных примеров.Тем не менее, это делает уникальный и увлекательный дисплей загрузки, который удерживает внимание на короткое время.
 См. Pen The Glowing Loader — Pure CSS Animation от Максима Россиньоля (@Maxoor) на CodePen.
 Посмотреть код можно здесь.
 22. Свечи 
 Вот блестящий пример того, как CSS-анимация может рассказать историю, пусть и короткую. Скорее всего, вам понадобится много практики, чтобы сделать что-то подобное, но это обязательно запомнится тем, кто посещает ваш сайт впервые.
 См. Анимацию на CSS «Смешная свеча» в чистом виде от Кевина Дэвида (@kevin_David_k) на CodePen.
 Посмотреть код можно здесь.
 23. Скоростной грузовик 
 «Speedy Truck» Криса Джонсона умело использует параллакс для имитации движения грузовика в естественной обстановке. Несмотря на то, что эта ручка минималистична, эта ручка компенсирует это несколькими творческими применениями свойства transform — есть даже небольшая неровность на дороге.
 См. Грузовик Pen Speedy от Криса Джонсона (@ChrisJohnson) на CodePen.
 Посмотреть код можно здесь.
 24. Снежный шар 
 Самый уютный пример, который мы смогли найти, — эта анимация снежного шара добавит вашей странице атмосферы, которую вы не получите с неподвижным изображением. Обратите внимание, как снег оживает только в пределах «стеклянного» шара.
 См. «Рождественский снежный шар» с помощью пера, созданный художником-программистом (@ Coding-Artist) на CodePen.
 Посмотреть код можно здесь.
 Последний пример 
 Как мы видели, простое прикосновение к CSS-анимации может иметь очень большое значение для создания более захватывающих впечатлений для ваших посетителей.Лучшие анимации служат вашему контенту и впечатлениям, не отвлекая и не выглядя бесполезными — все вышеперечисленные примеры замечательно подходят для этого баланса.
 Однако мы не смогли удержаться и добавить еще один пример, который поразил нас. Этот пример «Сторожевой башни», вероятно, выходит за рамки данной статьи по своей сложности, но он также является свидетельством того, на что способны только CSS и HTML.
 См. Анимацию на чистом CSS Pen Watch Tower от Трэвиса Даути (@tdoughty) на CodePen.
 Чтобы увидеть больше таких замечательных виньеток, как эта, загляните в профиль автора на CodePen и начните придумывать идеи для себя.
 Анимация ширины и высоты CSS без эффекта сжатия • PQINA 
 Возможность анимировать свойства CSS  width  и  height  было бы очень полезно. К сожалению, на данный момент это верный способ заставить ваш браузер кричать от боли. В этом 5-минутном руководстве мы рассмотрим использование свойства  transform  для имитации анимации ширины элемента.
 Не анимируйте свойства ширины и высоты 
 Браузерам не нравится, когда им приходится вычислять позиции и размеры элементов на веб-странице. Большинство элементов каким-то образом влияют на рендеринг других элементов, они перемещают братьев и сестер в другую позицию, или, когда их размер изменяется, родительский элемент также изменяет размер. Поэтому изменение размеров одного элемента может иметь множество непредвиденных последствий.
 Изменение ширины   и / или  высоты  элемента запустит браузер, чтобы определить, какие другие элементы (дочерние элементы, братья и сестры или родители) затронуты изменением и как эти элементы должны быть обновлены.Этот процесс называется переформатированием, за ним следует перерисовка.
 Эти операции очень нагружают процессор, поэтому, чтобы веб-сайт оставался быстрым, мы должны по возможности избегать их запуска.
 Использование преобразований вместо 
 Чтобы запустить эффективную анимацию, нам нужно использовать свойства CSS  transform  или , opacity . В этой статье мы сосредоточимся на преобразовании  
 Свойство transform дает указание графическому процессору выполнить последние обновления текстуры элемента перед его отображением на экране.Эти обновления могут, например, включать вращение, перемещение и масштабирование элемента.
 Вы можете сравнить текстуру графического процессора элемента с изображением, которое вы сделали с помощью своего мобильного телефона. Это изображение состоит только из пикселей, вся остальная информация об элементе отсутствует.
 Графический процессор должен иметь дело только с пикселями, которые представляют элемент. Поскольку графические процессоры очень хорошо справляются с пикселями, операции преобразования  и  выполняются очень быстро.
 У этого есть и обратная сторона.Мы можем управлять только пикселями, но не содержимым элемента. Помните, что у нас есть только изображение элемента, вся остальная информация отсутствует.
 Ниже показано, как эта разница влияет на свойство  border-radius . В примере преобразования   радиус не перерисовывается (как в примере  width ), он просто масштабируется. Для перерисовки потребуется перерисовка, графический процессор не может этого сделать, он работает только с пикселями.
  .square {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  радиус границы: 40 пикселей;
}

.square-resized {
  ширина: 100 пикселей;
}

.square-transformed {
  преобразовать: scaleX (0,5);
}  
 Анимация свойства  преобразования  в миллион раз быстрее, чем анимация  ширины ,  высоты  или любых других свойств, которые влияют на макет и вызывают перекомпоновку
 Но если мы его оживим, получится та странно растянутая форма. Это может быть быстро, но выглядит не лучшим образом. Это всегда напоминает мне об этих пришельцах в Duke Nukem 3D, которых раздавила дверь.
 9-сегментное масштабирование на помощь 
 До  border-radius  было тем, что нам нужно было создать изображение для каждого угла и / или края элемента, чтобы «подделать» радиус границы. В зависимости от дизайна это может дать до 8 изображений для одного элемента. Эти изображения будут расположены следующим образом:
 Это называется методом 9-сегментного масштабирования. Этот метод позволяет масштабировать элемент и растягивать изображения 2, 4, 6 и 8, связывая 1, 3, 7 и 9 с их соответствующими углами, используя абсолютное позиционирование.
 Теперь наши углы не растягиваются при масштабировании, см. Ниже:
 К счастью, мы живем в эпоху, когда браузеры поддерживают  border-radius , и нам больше не нужно полагаться на эту технику для рисования закругленных углов.
 Однако мы можем использовать эту технику для изменения размера элементов с помощью свойства  transform . Для краткости в этом примере рассматривается только масштабирование ширины элемента.
 Начнем с такой структуры:
 Давайте применим это к нашему квадрату.Нам понадобится один контейнер и три дочерних элемента для представления левой (1), центральной (2) и правой (3) частей квадрата.
  

  
 
  
 
  
 
  
 Давайте посмотрим на CSS
 
.квадратный {
  положение: относительное;
  высота: 100 пикселей;
}

.оставил,
.центр,
.верно {
  позиция: абсолютная;
  верх: 0;
  внизу: 0;
}

.оставил {
  фон: красный;
}
.center {
  фон: желтый;
}
.верно {
  фон: синий;
}


.оставил,
.верно {
  ширина: 20 пикселей;
}

.оставил {
  радиус границы: 20 пикселей 0 0 20 пикселей;
}
.верно {
  радиус границы: 0 20 пикселей 20 пикселей 0;
}


.center {
  
  слева: 20 пикселей;

  
  ширина: 1 пиксель;
  преобразовать: scaleX (60);

  
  трансформация происхождения: слева;
}

.верно {
  
  преобразовать: translateX (80 пикселей);
}  
 В результате получился красиво окрашенный квадрат.
 Я раскрасил части элементов, чтобы сделать их индивидуально узнаваемыми.
 Теперь для нашего следующего трюка мы можем анимировать  .center  и .справа  элементов квадрата.
  .center {
  анимация: анимация по центру 1 с, замедление бесконечного чередования;
}

.верно {
  анимация: анимация вправо, 1 с, замедление, бесконечное чередование;
}

@keyframes right-animate {
  0% {
    преобразовать: translateX (140 пикселей);
  }
  100% {
    преобразовать: translateX (20 пикселей);
  }
}

@keyframes center-animate {
  0% {
    преобразовать: scaleX (120);
  }
  100% {
    преобразовать: scaleX (0);
  }
}  
 Мне нравится, давайте вернем цвет фона к черному.
 Если вы используете Firefox, это должно выглядеть великолепно. Если вы используете Safari или Chrome, вы можете заметить небольшое мерцание между центральной и правой частями.
 Не понимаю, почему это происходит. Это может быть проблема с альфа-смешиванием ИЛИ округлением пикселей. В любом случае. Слегка перекрывая центральный элемент с правильным элементом, мы можем решить эту проблему рендеринга. Убедитесь, что элемент имеет ширину не менее  1  пикселей и масштабируется до  121  пикселей.
  @keyframes center-animate {
  0% {
    преобразовать: scaleX (121);
  }
  100% {
    преобразовать: scaleX (1);
  }
}  
 Хурай! У нас получился анимированный не мягкий квадрат!
 Мы могли бы пойти дальше и сделать его более гибким, переместив анимацию в JavaScript, создав веб-компонент или используя переменные CSS, но для целей этой статьи этого примера должно хватить.
 Посмотреть демонстрацию конечного результата на CodePen
 Хотите, чтобы вас всегда знали? 
 Подпишитесь ниже, чтобы быть в курсе новых статей и выпусков продуктов PQINA, таких как FilePond и Doka Image Editor
 Держи лошадей 
 Прежде чем вы начнете использовать эту технику повсюду, обратите внимание, что:
 Мы все еще масштабируем центральный квадрат по оси X, поэтому фоновые изображения, примененные к квадрату, будут растянуты.
 Можно сделать  box-shadow , но это немного сложно.
 Квадрат не может отрезать другие элементы, например,  переполнение: скрыто  не сработает.
 Тем не менее, с небольшой хитростью вы можете использовать это для создания потрясающих эффектов. Элементы файлов и область перетаскивания библиотеки загрузки файлов FilePond используют эту технику для плавной анимации их высоты.
 Doka Image Editor использовал эту технику для осей x и y для рендеринга и анимации белого прямоугольника обрезки поверх изображения. С тех пор он был частично заменен на WebGL.
 Заключение 
 Свойства CSS по умолчанию  width  и  height  (вместе с большинством других свойств) не подходят для анимации. Они слишком сильно влияют на производительность рендеринга, потому что их обновление заставляет браузер переоценивать положение и размеры связанных элементов.
 Если вместо этого мы используем свойство  transform , мы можем анимировать наш квадрат на графическом процессоре. Хотя это очень быстро, это также вводит некоторые ограничения, потому что графический процессор работает только с пикселями.
 Применяя технику 9-срезов, мы можем обойти некоторые из этих ограничений и создать элемент, который мы можем анимировать эффективным способом.
 Я использую Twitter, чтобы делиться новыми советами и приемами веб-разработки, так что подпишитесь на меня, если вам это интересно и вы хотите узнать больше.
 Animate SVG with CSS - LogRocket Blog 
  Примечание редактора: эта статья была обновлена ​​22.01.2021. 
 Веб-анимация - это восторг.Они улучшают взаимодействие с пользователем, поскольку могут обеспечивать визуальную обратную связь, направлять задачи и оживлять веб-сайт. Есть несколько способов создания веб-анимации, включая библиотеки JavaScript, GIF и встроенные видео.
 Можете ли вы использовать CSS для анимации SVG? 
 Но простая комбинация SVG и CSS привлекательна по нескольким причинам. Состоящие из кода вместо тысяч кадров растровых изображений, они эффективны и быстрее загружаются, чем громоздкие GIF-файлы и видео. Кроме того, существует множество простых анимаций, которые можно создать без необходимости добавлять еще один плагин JavaScript к загрузке страницы вашего веб-сайта.
 Для загрузки, SVG-файлы основаны на векторах, поэтому они безупречно масштабируются по размеру экрана и уровням масштабирования, не создавая резкой пикселизации.
 Зачем использовать CSS для анимации SVG? 
 Теперь вы можете спросить: почему именно CSS? Почему бы не анимировать с помощью SMIL, стандартной спецификации SVG-анимации? Как оказалось, поддержка СМИЛ снижается. Chrome движется в направлении отказа от SMIL в пользу анимации CSS и API веб-анимации.
 Итак, приступим к CSS-анимациям ... Но как они создаются? В этой статье мы узнаем, как создавать эти легкие масштабируемые анимации!
 
 видео Пола Райана
 Общие варианты использования анимации SVG с помощью CSS 
 Во-первых, давайте рассмотрим несколько практических примеров того, почему вам могут понадобиться анимированные SVG-файлы в веб-приложении или на целевой странице.
 Иконки 
 Анимированные SVG-файлы отлично подходят для значков, которые указывают на микровзаимодействия и изменения состояния. Они также полезны, когда направляют пользователя к следующему действию, например, в ознакомительном туре. Общие варианты использования включают загрузку, выгрузку, переключение меню и воспроизведение / приостановку видео.
 Иллюстрации 
 Иллюстрации - еще один распространенный вариант использования. Их можно включить в продукт как пустое состояние, чтобы продемонстрировать, что делать, чтобы сгенерировать данные на информационной панели.Еще одним популярным вариантом использования являются анимированные смайлы и стикеры. Есть также анимированные иллюстрации, которые украшают целевые страницы, привносят объемность и веселье при построении бренда.
 Как подготовить SVG к анимации 
 А теперь перейдем к самому мелкому. Первое, что вам нужно сделать, это подготовить SVG. Может показаться неприятным начинать чистку, когда вы готовы запутаться и превратиться в сумасшедшего ученого-аниматора, но будет проще начать с упрощенного кода SVG.
 Упростите код SVG 
 Когда создается SVG, он содержит дополнительный код, который часто не нужен. Поэтому очень важно его оптимизировать. Мне нравится использовать SVGO, который уменьшает размер файла и сохраняет пути с уникальными идентификаторами (это важно для предотвращения проблем с несколькими SVG на одной странице). Это инструмент Node.js, и есть несколько способов его использования, включая плагин Sketch: SVGO Compressor.
 Создание преднамеренных группировок (при необходимости) 
 Откройте SVG в редакторе кода и обратите внимание на элементы   .Они используются для группировки элементов SVG. Если вы хотите анимировать группу элементов вместе, оберните их в     и назовите их классом или идентификатором.
 Рассмотрите возможность преобразования имен идентификаторов в имена классов, если вы планируете одинаково стилизовать более одного пути (идентификаторы можно использовать только один раз). Если у вас есть идентификатор или класс на фигуре, вы сможете настроить таргетинг на них с помощью CSS. Когда вы сохраните SVG, никаких видимых изменений пока не будет.
 Остерегайтесь порядка наложения (если вы будете анимировать фигуру, которая идет позади другой фигуры) 
 Это кажется нелогичным, но фигуры, перечисленные последними, будут вставлены поверх вышеупомянутых фигур.Итак, если вы хотите, чтобы фигура отображалась на заднем плане, убедитесь, что она указана в верхней части кода SVG. Фигуры SVG «раскрашиваются» сверху вниз.
 Установить предпочтительное начальное состояние стиля SVG  SVG
 имеют атрибуты представления, похожие на стили CSS, но устанавливаемые непосредственно в SVG. Типичный пример - заливка  цветом . Поскольку эти стили установлены в SVG, вы можете предположить, что они имеют большой вес для браузера. Как оказалось, любой CSS / Sass, который вы установили извне, естественным образом переопределит стиль SVG без необходимости в объявлении ! Important .
 Однако вы должны помнить о том, что установлено в SVG, чтобы вы могли подготовиться к тому, что будет показано во время загрузки страницы. Для страницы с медленной загрузкой вы можете увидеть вспышку SVG перед стилизацией с помощью CSS.
 Я рекомендую оставить ширину и высоту, чтобы избежать нестилизованной вспышки SVG во время загрузки страницы (Сара Суейдан хорошо объясняет здесь Flash of Unstyled SVG (FOUSVG)).
 Применение CSS к SVG 
 Теперь, когда у вас есть опрятный SVG, давайте поговорим о том, как добавить CSS.Когда дело доходит до применения CSS к SVG, следует учитывать несколько факторов. Ограничением является то, что вы не можете использовать внешнюю таблицу стилей для применения стиля к SVG, имеющему внешнюю ссылку.
 Вариант 1. Встроить код SVG в HTML (мой любимый) 
 Это делает элемент SVG и его содержимое частью дерева DOM документа, поэтому на них влияет CSS документа. Это мой любимый вариант, потому что он хранит стили отдельно от разметки.
 Вы увидите, что остальные варианты ниже сильно переплетены.Если вы используете Rails, есть драгоценные камни, которые могут автоматически встраивать SVG в представления. Итак, в своем коде вы можете просто сослаться на внешний SVG, тогда он будет встроен при компиляции. Дополнительным преимуществом этого метода является то, что встраивание SVG означает, что на один HTTP-запрос меньше. Ура, спектакль!
 См. Pen 
 SVG - 1 Люка Тубиниса (@lukelogrocket) 
 на CodePen.
  Вариант 2. Включите CSS в SVG в тег