Animated css: A cross-browser library of CSS animations.

Transitions vs Animations — CSS Animation

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

Что такое Transitions?

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

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

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

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

Если ты хочешь изменить элемент плавно с одного состояния в другой, лучше использовать transition.

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

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

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

• A list item
• 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) вполне более предпочтительна.

CSS-анимация | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS-анимация

— ВД

• global»>

  Глобальное использование

  98,66% + 0,02% знак равно 98,68%

Комплексный метод анимации некоторых свойств элемента

Хром

1. 4 — 42: Supported
2. 43 — 107: Supported
3. 108: Supported
4. 109 — 111: Supported

Edge

1. 12 — 106: Supported
2. 107: Supported

Safari

1. 3.1 — 3.2: не поддерживается
2. 4 — 5: Частичная поддержка
3. 5.1 — 8: Поддерживается
4. 52% — Supported»> 9 — 16,0: Поддерживается
5. 16.1: Поддерживается
6. 16,2 — TP: поддержан

Firefox

988888888888888888888888888888888888888888888888888888888888888 2 — 40015

198888888888888888888888 2 — 40015

. Не поддерживается

• 5 — 15: Поддерживается
• 16 — 106: Поддерживается
• 107: Поддерживается
• 108 — 109: Поддерживается

Opera

1. 9 — 11,6: не поддержал
2. 12: Поддержка
4. 06% — Not supported»>
.
5. 15 — 29: Поддержано
6. 30 — 91: Поддержано
7. 92: Поддерживается

IE

1. 5,5 — 9: не поддерживается
2. 10: поддержан
3. 11: Поддерживается

.0014

1. 107: Supported

Safari on iOS

1. 3.2 — 5.1: Partial support
2. 02% — Supported, requires this prefix to work: -webkit-«> 6 — 8.4: Supported
3. 9 — 16.0: Supported
4. 16.1: Supported

Samsung Internet

1. 4 — 18.0: поддержан
2. 19.0: Поддерживается

Opera Mini

1. Все: не поддерживается

Opera Mobile

1. 10 — 12: не поддерживается
2. 12.1: Поддержка

8 71: не поддерживается

3. 12.1: Поддержка0015

UC Browser for Android

1. 13.4: Supported

Android Browser

1. 2. 1 — 3: Partial support
2. 4 — 4.4.4: Supported
3. 107: Supported

Firefox for Android

1. 106: поддержан

QQ Browser

1. 13.1: Поддержано

Baidu Browser

1. 13.18: Поддерживается

KAIOS Browser

1174 2.5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5: 5,

.0015

Ресурсы:

Запись в блоге об использовании

WebPlatform Docs

CSS | Анимации | Codecademy

Открыть значок

Редактировать на GitHub

Анимация CSS позволяет элементу HTML постепенно переходить из одного стиля в другой без использования JavaScript. Любое количество свойств CSS может быть изменено любое количество раз.

Чтобы использовать анимацию CSS, необходимо указать некоторые ключевые кадры для анимации.

@keyframes Правило

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

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

будет загружаться фиолетовым цветом и постепенно станет желтым в течение 5 секунд.

 
 
 /* Анимация */ 
 
 @keyframes color-change { 
 
 from { 
 
 color: Purple; 
 
 } 
 
 25% { 
 
 цвет: оранжевый; 
 
 } 
 
 50% { 
 
 цвет: красный; 
 
 } 
 
 75% { 
 
 цвет: синий; 
 
 } 
 
 до { 
 
 цвет: желтый; 
 
 } 
 
 } 
 
 /* Элемент */ 
 
 h2 { 
 
 цвет: фиолетовый; 
 
 имя-анимации: изменение цвета; 
 
 продолжительность анимации: 5 с; 
 
 } 
 

Анимации

@keyframes

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

анимация

Сокращенное свойство, которое устанавливает анимацию для элемента.

анимация-задержка

Определяет, когда начинается анимация.

анимация-направление

Определяет, выполняется ли анимация вперед или назад в некоторых или во всех циклах.

animation-duration

Определяет продолжительность анимации.

animation-fill-mode

Определяет, какие значения применяются анимацией вне времени ее выполнения.

animation-iteration-count

Определяет, сколько раз запускается анимация.

имя-анимации

Определяет разделенный запятыми список анимаций для применения к данному селектору.

animation-play-state

Определяет, запущена анимация или приостановлена.

функция синхронизации анимации

Определяет кривую ускорения для каждого ключевого кадра в одной анимации.