Name animation: CSS3-анимация (свойство animation)
animation-name | CSS справочник
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 43.0+ | 30.0+ | 9.0+ |
Описание
CSS свойство animation-name указывает список имен анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает правило @keyframes, определяющее значения свойств для каждой ключевой точки анимации.
Примечание: часто бывает удобнее использовать свойство animation, позволяющее задавать сразу все свойства для анимации в одном объявлении.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам и псевдо-элементам ::before и ::after |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.animationName=»mymove» |
Синтаксис
animation-name: имя_keyframe|none;
Значения свойства
| Значение | Описание |
|---|---|
| имя_keyframe | Указывает имя правила @keyframes. |
| none | Указывает, что анимация отсутствует. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
div.primer {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes mymove {
from { left:0px; }
to { left:540px; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Результат данного примера:
все параметры анимации — учебник 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-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+ |
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css3-animations/#animation-delay |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойство 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.
Список лучших инструментов для web-анимации / Хабр
Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.
В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.
Также буду рад отзывам на инструменты из текущего списка, с помощью ваших отзывов я смогу сделать описание инструментов более полным.
Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll
SVG
Snap.svg
Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работой с SVG вообще. Современная версия Raphael.js
Минимальный вес: 81кб
Ссылка
SVG.js
Отличная библиотека с кучей крутейших плагинов и хорошей документацией. Заявляется лучшая производительность в сравнении с Snap.svg и Raphael.js
Минимальный вес: 64кб
Ссылка
Animateplus
Библиотека может быть интересна своей легковесностью. Автором не развивается.
Минимальный вес: 9кб
Ссылка
Vivus
Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.
Минимальный вес: 11кб
Ссылка
Raphael
Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.
Минимальный вес: 91кб
Ссылка
Walkway
Хорошая библиотека для анимации контуров SVG, выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
BonsaiJS
Интересна в качестве экспоната, автором не развивается, к сожалению.
Минимальный вес: 130кб
Ссылка
ProgressBar.js
Неплохое, хотя и слегка тяжеловесное решение для лоадера.
Минимальный вес: 21кб
Ссылка
SVG Morpheus
Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.
Минимальный вес: 22кб
Ссылка
Velocity.js
Серьёзное решение для JS анимации, используется многими большими ребятами и активно поддерживается автором.
Минимальный вес: 43кб
Ссылка
Mojs
Хорошая библиотека, с богатым функционалом и декларативным интерфейсом.
Минимальный вес: 130кб
Ссылка
DOM
GSAP
Анимационный гигант мира front-end. Сверх-производительность и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.
Минимальный вес: 41кб
Ссылка
Anime.js
Достаточно активно-развивающаяся библиотека. Очень-очень компактна для своих возможностей и имеет хорошую документацию.
Минимальный вес: 11кб
Ссылка
Animo.js
Совсем небольшая утилита, если размер библиотеки очень критичен, то можно рассмотреть и её.
Минимальный вес: 6кб
Ссылка
Move.js
Неплохое решение и легковесное решение с удобным интерфейсом.
Минимальный вес: 14кб
Ссылка
Textillate.js
Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).
Минимальный вес: 8кб
Ссылка
Firmin
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 8кб
Ссылка
AliceJS
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 50кб
Ссылка
Motio
Позиционирует себя как «Sprite based animation library», выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
Animatic
Подойдёт для простых решений, может похвастаться удобным интерфейсом.
Минимальный вес: 22кб
Ссылка
Just Animate
Свежая библиотека, выделяется легковесностью. Активно развивается автором.
Минимальный вес: 14кб
Ссылка
Popmotion
Серьёзная и комплексная штука. Создатели позиционируют её как более легковесный аналог GSAP. Выделяется интеграцией в React, относительно небольшим весом и классной работой с SVG.
За наводку спасибо exdeniz
Минимальный вес: 41кб
<a href=«popmotion.io> Ссылка
Canvas
CreateJS
Швейцарский нож для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (ex Flash Pro). Очень серьёзная штука, подойдёт как для рекламы/промо, так и для создания HTML5 игр.
Минимальный вес: 186кб
Ссылка
Bhive
Может быть интересна как экспонат. Автором не развивается.
Минимальный вес: 36кб
Ссылка
Two.js
Интересная библиотека, которая может рендерить в Canvas, SVG и даже WebGl. Активно развивается, достаточно производительная и радует функционалом.
Минимальный вес: 50кб
Ссылка
Ocanvas
Минимальный вес: 73кб
Ссылка
Позиционируется как „Object-based canvas drawing“. Автором не заброшена.
Fabric.js
Подойдёт не только для анимации Canvas, но и как абстракция для работы с ним.
Минимальный вес: 248кб
Ссылка
Paper.js
Позиционирует себя как „Vector graphics scripting framework“. Серьёзный и интенсивно развивающийся инструмент.
Минимальный вес: 277кб
Ссылка
Konva
Неплохой инструмент для анимации и вообще для работы с Canvas.
Минимальный вес: 138кб
Ссылка
DeltaJS
Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
В планах WebGL и SVG.
За библиотеку спасибо Keyten
Минимальный вес: 84кб
Ссылка
PixiJS
Очень и очень серьёзный инструмент для создания эффектов, анимации и даже игр. Может рендерить как в WebGL так и в Canvas для старых платформ. Обладает огромнейшим функционалом и отличной производительностью, однако вес у него соответствующий.
Минимальный вес: 414кб
Ссылка
Scroll
AOS
Неплохая простая библиотека для анимаций по скролингу, подойдёт для простых задач.
Минимальный вес: 13кб
Ссылка
Wow.js
Простое решения для анимаций по скролингу. Для коммерческого использования не бесплатна.
Минимальный вес: 13кб
Ссылка
ScrollReveal
Легковесная и бесплатная для коммерческого использования.
Минимальный вес: 9кб
Ссылка
ScrollMagic
Несмотря на то, что последние изменения библиотеки были 2 года назад, является наиболее функциональным решением для скролл-анимации.
Минимальный вес: 17кб
Ссылка
Skrollr
Отличнейшая библиотека для сложных анимаций привязанных к скролу. Может похвастаться легковесностью и производительностью.
Минимальный вес: 12кб
Ссылка
Easing
Ceaser
GUI-инструмент для генерации нужный временных кривых.
Ссылка
Сubic-bezier
Инструмент для генерации временных кривых, не лучше и не хуже других.
Ссылка
Bezier easing
Ещё один инструмент для генерации временных кривых.
Ссылка
GUI
Stylie
GUI инструмент для генерации CSS-анимации.
Ссылка
Keyframer
Ещё один GUI инструмент для генерации CSS-анимации.
Ссылка
CSS-loaders
Небольшой набор CSS-лоадеров. Есть возможность кастомизировать цвета.
Ссылка
Bounce.js
Неплохой генератор CSS-анимаций.
Ссылка
CSS Animation Kit
GUI-инструмент для генерации CSS-анимаций. Не лучше и не хуже других.
Ссылка
Animista
На данный момент — самый функциональный и интересный GUI-инструмент. Можно попробовать хотя бы ради интереса.
Ссылка
CSS
Magic animations
Большой набор CSS-классов с различными анимациями.
Минимальный вес: 16кб
Ссылка
Animate.css
Большущая коллекция CSS-классов с анимациями.
Минимальный вес: 17кб
Ссылка
Spinkit
Небольшой набор CSS-лоадеров.
Ссылка
CSSanimate.com
GUI-инструмент для генерации CSS-анимаций.
Ссылка
CSS3 Animation Cheat Sheet
Небольшая библиотека CSS-классов с анимациями.
Минимальный вес: 12кб
Ссылка
Буду благодарен, если вы внесёте свой вклад своими комментариями с другими полезными инструментами, а так же коммитам в отдельном репозитории созданным специально для этого.
Кроме того, доступна GUI версия каталога с фильтрами по категориям и размеру.
75 инструментов веб-анимации для лендинга
Анимация — это один из последних трендов в веб-дизайне. Ее популярность непостоянна, но анимация всегда где-то присутствует как неотъемлемая часть каждого сайта. Это и крошечные, едва заметные индикаторы загрузки, и целые лендинги, на которых вам словно показывают фильм, — анимация проникает во все области дизайна.
У тех, кто хочет использовать анимацию, богатый выбор вариантов: от чисто декоративных элементов, просто украшающих внешний вид страницы, до эффектов, активно улучшающих пользовательский опыт.
Содержание
Анимация на лендинге
1. Анимация плавно появляющихся элементов при загрузке страницы
2. Анимация группы элементов
3. Анимация лид-формы
4. Сложная анимация и параллакс
1. Animate.css
2. Magic Animations
3. Bounce.js
4. AnijS
5. Snabbt.js
6. Kute.js
7. Velocity.js
8. Lazy Line Painter
9. SVG.js
10. Motion UI
11. Wait! Animate
12. Dynamics.js
13. Choreographer.js
14. Anime.js
15. Mo.js
16. Sequence.js
17. Shifty
18. It’s Tuesday
19. CSS Animate
20. Vivus.js
21. Bonsai.js
22. GSAP by GreenSock
23. Popmotion
24. Tween.js
25. Hover.css
26. Transit
27. Rocket
28. Animo.js
29. Shift.css
30. CSShake
31. Saffron
32. CSSynth
33. Ceaser
34. Morf.js
35. Voxel.css
36. Repaintless.css
37. MixItUp
38. Wallop
39. Ramjet
40. jQuery DrawSVG
41. Animatic.js
42. Move.js
43. Eg.js
44. GFX
45. Stylie
46. Iconate.js
47. AnimateMate
48. CAAT
49. Granim.js
50. Animista
51. Obnoxious.css
52. Animatelo
53. Foxholder
54. Rhythm.js
55. Colorido.js
56. Barba.js
57. ScrollReveal.js
58. Scrollanim
59. ScrollTrigger
60. Force.js
61. AOS
62. Rellax
63. Tilt.js
64. Transform-when
65. CSS3 Animation
66. Curve.js
67. Animator.js
68. Cel-animation
69. Scrollissimo
70. jqClouds
71. Color animation
72. Flubber
73. Particles.js
74. 3D Lines Animation with Three.js
75. Three.js
6 правил анимации на лендингах
1. Не анимируйте несколько элементов за раз
2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга
3. Следите за временем
4. Не забывайте о доступности
5. Проводите тест ваших дизайнерских решений
6. Разработку анимаций следует начинать на ранних этапах работы над дизайном
Заключение
Анимация на лендинге
Некоторые виды анимаций на лендинге позволяют завладеть вниманием посетителя, заинтересовать его, убедить остаться на странице и как результат — совершить конверсионное действие. Грамотно размещенные анимационные элементы мягко «продвигают» пользователя по всему лендингу, не давая ему скучать.
В наших проектах мы успешно используем анимацию в нескольких направлениях:
1. Анимация плавно появляющихся элементов при загрузке страницы
Возьмем в пример один из лендингов, посвященных продаже популярных моноколес:
Полную версию лендинга можно посмотреть здесь
Подобная динамика на странице позволяет лучше презентовать важную информацию. Самый популярный анимационный прием — это «счетчик», потому что обычные числовые значения (например, количество довольных клиентов компании) вряд ли привлекут так много внимания.
2. Анимация группы элементов
Практически аналогичный эффект, но с участием группы элементов. Становится просто необходимым, когда нужно предложить клиенту ознакомиться с большим блоком информации.
В примере ниже — лендинг по продаже квартир (блок «Почему другие риэлторы не продают настолько эффективно»):
Полную версию лендинга можно посмотреть здесь
3. Анимация лид-формы
Если вы хотите анимировать лид-форму, чтобы привлечь к ней внимание посетителя лендинга, то в конструкторе LPgenerator доступны 2 события, при которых будет срабатывать анимация — при появлении элемента на экране при прокрутке лендинга, а также при наведении указателя мыши:
Чтобы настроить анимацию формы, кликните по полям формы и выберите пункт настроек «Анимация» в правой панели редактора
4. Сложная анимация и параллакс
Этот прием — симбиоз двух пунктов выше, который должен использоваться крайне осторожно, чтобы не перегрузить пользователя «вау»-эффектом. Подходит для товаров с «эмоциональной» составляющей, где значительный акцент нужно сделать именно на визуальных характеристиках:
Данный лендинг сочетает в себе эффект анимации и параллакс-скроллинга
Далее мы перечислим инструменты, которые позволят вам создать анимацию для ваших лендингов и других проектов. Конечно, вы не будете пользоваться ими всеми и постоянно, но у каждого из этих инструментов есть своя определенная задача, и некоторые точно придутся вам по душе.
Читайте также: Обновление редактора LPgenerator: анимация на ваших лендингах
Это фундаментальная библиотека анимаций, совместимых со всеми браузерами и подходящих для множества задач. Она содержит все — от классических подскакиваний и затуханий до последних новинок и уникальных эффектов — и способна удовлетворить потребности практически любого проекта.
Magic Animations концентрируется на необычных эффектах, придающих интерфейсу определенную изюминку. Эта библиотека не может похвастаться большим разнообразием, но ее достаточно, чтобы обогатить пользовательский опыт.
Это небольшая площадка для экспериментов с CSS-анимацией. Просто добавьте элемент и выставьте настройки, чтобы все ожило, а потом экспортируйте CSS-файл.
Это интуитивно понятный инструмент для работы с анимацией, позволяющий использовать собственные категории или Animate.css, чтобы создать что-нибудь интересное.
Знаменит своими минималистическим подходом, позволяющим создавать быстрые анимации. Он весит всего 5 килобайт, но способен заметно улучшить любой элемент, вращая его, наклоняя или масштабируя.
Читайте также: Как легко и быстро создать GIF-анимацию?
Это надежный движок для анимации, быстрый и совместимый с разными браузерами благодаря набору эффективных альтернатив для устаревших браузеров. Kute.js содержит множество плагинов для организации продуктивной рабочей среды.
Velocity.js — непрезентабельный на первый взгляд движок. Однако в его арсенал входят все обычные типы анимации, он быстр и независим от jQuery.
С этим инструментом легко создавать масштабируемую векторную графику. Экспортируйте свои рисунки из Illustrator в формате SVG, загрузите в конвертер, и он сгенерирует файл iQuery, содержащий анимацию. При необходимости вы можете вносить изменения прямо в код.
SVG.js — это интуитивно понятная среда, в которой вы можете управлять файлами SVG и анимировать их. Это небольшой независимый инструмент с простой структурой и общим API. Вы можете делать все, что захотите: анимировать размер, цвет, позицию и текст, трансформировать компоненты, связывать их между собой и так далее.
Читайте также: Создание анимационной ячейки в SVG графике
В отличие от предыдущих примеров, при создании интересных CSS-анимаций Motion UI опирается на Sass. Инструмент содержит массу заранее заданных настроек и эффектов, которые можно применить к любому компоненту HTML. Все работает во всех популярных браузерах, кроме IE9.
Wait! Animate позволяет легко работать с ожиданием и задержками. Посчитайте все необходимые временные интервалы на небольшой панели и создайте естественную анимацию без лишней суеты.
Dynamics.js — это библиотека, работающая на JavaScript и предлагающая 9 стандартных эффектов. Вы можете задать продолжительность, частоту, трение, предполагаемый размер и силу, чтобы создать реалистичные анимации, основанные на законах физики.
С этой библиотекой вам больше не придется бояться сложных анимаций, потому что она возьмет все проблемы на себя. Пока она работает с ограниченным набором анимаций, но позволяет настраивать функции так, как вам удобно, чтобы создавать собственные шедевры.
Anime.js — это впечатляющий набор функций, позволяющих связывать множество анимаций, синхронизировать этапы, рисовать линии, изменять форму объектов, создавать собственные анимации и т.д.
Mo.js быстр, интуитивно понятен и прост. Он позволяет создавать вовлекающие тропинки, неожиданные диалоговые трансформации, пузыри, взрывные эффекты и многое другое.
Sequence.js — это фрейм, работающий на CSS, для создания респонсивных пошаговых анимаций, которыми можно управлять с помощью прикосновений. Инструмент идеален для слайдеров, презентаций, баннеров и других динамических компонентов. Среди премиум-планов вы найдете бесплатный, обеспечивающий вас личной open-source лицензией.
Shifty — это движок для построения промежуточных изображений, ставящий во главу угла оптимизацию, быструю работу сайта, гибкость и расширяемость. Этот инструмент считается достойной альтернативой GreenSock с гораздо более понятным интерфейсом.
Tuesday — это автономная библиотека анимаций, которой можно пользоваться вместе с другими библиотеками. Она делает входы и выходы плавными, гладкими и элегантными и предлагает множество стандартных эффектов: затухание, расширение, сжатие, падение и т.д.
CSS Animate — это простая площадка для написания рабочего кода для любой анимации. Задайте имя, класс, свойства анимации и фрейма, управляйте временной последовательностью и добавляйте маркеры — одним словом, настраивайте все, что вам нужно, чтобы создать стандартную анимацию, основанную на ключевом кадре.
Vivus.js поддерживает три типа анимации: задержка, синхронизация и открытие одного изображения за другим, — и позволяет создавать плавные и естественные векторные анимации, так что загрузка контента станет приятным опытом.
Читайте также: Анимация для начинающих: анимация прыгающего мячика
Bonsai.js — это библиотека JavaScript для серьезной работы с графикой, с простым API и визуализацией SVG. Используйте онлайн-редактор, чтобы протестировать инструмент, познакомиться с его структурой и даже загрузить некоторые примеры, с которых можно начать работу.
GSAP — это платформа для профессиональных аниматоров. На ней представлено множество плагинов и утилит, отвечающих за разные типы анимации: BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite и другие.
Popmotion — еще одна легкая и доступная альтернатива GreenSock. Это движок, позволяющий полностью контролировать каждый фрейм, с инструментами для построения промежуточных изображений, цветовых трансформаций и других эффектов, необходимых при разработке сложных решений.
С помощью Tween.js сделано немало хороших анимаций. Это передовой движок для построения промежуточных изображений со множеством настроек и отличное решение для улучшения проектов, работающих на Three.js.
Библиотеку Hover.css можно разделить на несколько главных категорий: 2D-трансформации, фоновые трансформации, анимация иконок, трансформации границ, теней и света, пузыри с текстом и завитки. Применяйте эти эффекты к любым элементам своего дизайна без ограничений.
Список функций Transit достаточно короток, однако в него входят самые важные вещи для создания 2D и 3D анимации. Например, вы можете задать задержку и продолжительность, добавить размытие, использовать относительные величины и так далее.
Rocket — это решение для того, чтобы украсить перемещение объекта из одной точки в другую. В Rocket входят 8 таких эффектов, как пульсация и вращение, придающих движению изюминку.
Animo.js — это относительно небольшой инструмент для переходов и анимаций. В него входит набор таких дополнительных плагинов, как обратный отсчет и вращение, обогащающих библиотеку и облегчающих достижение нужного эффекта.
Shift.css — это фрейм для создания анимации внутри контейнера, позволяющий работать и с постоянными, и с адаптивными элементами и содержащий 15 стандартных анимаций, в том числе движение, появление, выход, падение и другие.
CSShake включает в себя 11 категорий, заставляющих элементы вашего DOM дрожать. Вы можете выбрать направление (по горизонтали или по вертикали), тип (зафиксированный, сумасшедший, постоянный, прерывистый), интенсивность (слабо или сильно) или просто оставить настройки по умолчанию.
Читайте также: 6 способов использования анимации без отвлечения от оффера
Если вы предпочитаете миксины для легкого и быстрого управления анимациями и переходами, Saffron вам определенно подойдет. Это собрание методов многократного использования, написанное на Sass, с возможностью задавать параметры и переменные.
CSSynth — это маленький редактор, в котором вы насладитесь красотой синхронизации. Анимация основана на серии квадратов, количество которых вы можете задать на панели слева. Выберите эффект, задайте задержку и скачайте результат в формате CSS или SCSS.
Ceaser — старый, проверенный временем инструмент для проведения экспериментов с классической анимацией затухания, содержащий множество вариантов. Два дополнительных параметра (продолжительность и эффект) помогут довести результат до совершенства.
Если вам нужно немного больше, чем дает Ceaser, вам стоит попробовать Morf.js. Он предлагает переходы, основанные на полностью настраиваемых функциях затухания, и содержит почти 40 готовых вариантов, которые легко адаптировать под свои нужды.
Voxel.css создан специально для 3D-рендеринга, и простота его установки и использования позволит освоить 3D CSS даже новичкам. Библиотека содержит 4 важных категории: сцена, мир, редактор и воксел, — которые помогут создавать игры и наслаждаться работой.
Этот инструмент использует технику FLIP для создания быстрых и плавных анимаций. Он неидеален, но это отличное начало для тех, кто особенно заботится о скорости работы своего сайта или приложения.
MixItUp — это библиотека красивых фильтров, сортировок, пересечений и действий, необходимых большинству интерфейсов вроде галерей, портфолио и т.д. Она автономна и обещает высокую скорость работы сайта.
Wallop предназначен для создания красивых эффектов появления и исчезновения, и, естественно, с его помощью обычно делают слайдеры. Впрочем, никто не мешает вам развивать его потенциал и создавать что-нибудь интересное и интригующее.
Ramjet превращает один элемент в другой с иллюзией движения, возникающей благодаря функции затухания. Инструмент работает с элементами DOM, векторной графикой, статичными и анимированными изображениями.
Основанный на движке jQuery, этот плагин прорисовывает части векторной графики и делает картинку резкой, но в то же время элегантной. Просто добавьте плагин на страницу, инициализируйте и запустите анимацию.
Это отличное кросс-браузерное решение, оживляющее все с помощью CSS-трансформаций, 3D-трансформаций и JavaScript. Его главная задача — облегчить вам усилия при анимировании нескольких объектов сразу. Вы можете создавать параллельные и последовательные анимации и точно настраивать продолжительность, задержку и затухание.
Move.js — это упрощенный инструмент для создания стандартных анимаций вроде масштабирования, вращения, движения или перехода. Каждую анимацию можно улучшить классической функцией затухания.
Eg.js — это тщательно подобранная коллекция различных эффектов и динамических элементов, призванных улучшить взаимодействие с интерфейсом. В ее состав входит 8 мощных компонентов для основных задач и 6 главных методов для других случаев.
GFX — это интересная библиотека 3D-анимации для создания программируемых анимаций на CSS3. Она работает с jQuery, так что добиться желаемых результатов довольно просто. Вы можете «поиграть» с масштабированием, вращением, переходами и прочими эффектами.
Хотя Stylie и считается развлекательным инструментом, он определенно способен впечатлить вас своими возможностями. Центр управления содержит 4 вкладки, позволяющие настраивать ключевые кадры и затухание, экспортировать варианты и HTML, то есть легко создавать сложные анимации.
Iconate.js «вдыхает жизнь» в трансформацию иконок, добавляя симпатичные эффекты и улучшая переходы между двумя объектами. Этот инструмент отлично работает не только со шрифтом Font Awesome, но и с Glyphicons, а также позволяет самостоятельно задать набор пиктограмм.
AnimateMate — это компактный инструмент для создания и экспорта небольших анимаций из Sketch. Он позволяет работать с ключевыми кадрами и функциями затухания, управлять последовательностями и так далее.
CAAT — это надежный фрейм, работающий в тандеме с JavaScript. В набор инструментов входят сцены, технологии мульти-рендера, маски, стандартный набор эффектов и другое.
Granim.js — это небольшая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это может быть стандартный круговой градиент, или динамический градиент, применяемый к фону картинки, или движущиеся градиенты в сочетании с масками.
Animista — это площадка для проведения экспериментов с кучей готовых стандартных и нестандартных анимаций для CSS. Задайте продолжительность, время, задержку, количество взаимодействий и некоторые другие параметры и посмотрите на результат.
Читайте также: Изучаем полезные свойства и создаем анимации на Android
Obnoxious.css содержит 5 уникальных анимаций, основанных на CSS и заставляющих элементы интерфейса дрожать, вращаться, увеличиваться, менять вес шрифта и имитировать строб-импульс. Все, что вам нужно, — это применить интересующий вас эффект к нужному элементу.
Animatelo включает в себя кучу привлекающих внимание динамических эффектов, взятых из знаменитого Animate.css, так что их легче применить. Поддерживается всеми современными браузерами.
Foxholder — это пакет с 15 маленькими интересными эффектами, созданными специально для улучшения взаимодействий пользователя с формой. Каждый из них выделяет поле для ввода данных: можно сделать его границы ярче, добавить визуальные подсказки, заставить текст двигаться и т.д.
Rhythm.js — это библиотека JavaScript с маленькими симпатичными анимациями, вдохновленными стилем диско: эффекты имитируют различные танцевальные движения. Она содержит почти 20 вариантов, которые привнесут на ваш сайт немного буги-вуги.
Как и Granim.js, этот плагин для JavaScript создан для управления цветами. Он помогает динамически изменять тон и прозрачность фона и текста, а также создавать нестатичные радиальные, линейные, диагональные и горизонтальные градиенты.
Barba.js использует PJAX (технику, основанную на подходе ajax), чтобы избежать резкого переключения страниц. Этот инструмент мягко скрывает старый контейнер и заменяет его новым так, что это приятно глазу.
ScrollReveal.js — это популярный инструмент для создания анимации с прокруткой. Благодаря ему вы можете управлять несколькими анимациями и всеми их стандартными параметрами. Этот инструмент отлично работает и с десктопными, и с мобильными браузерами.
Читайте также: Размышляем на тему длинной прокрутки, или так называемого скроллинга
Scrollanim — не столь изысканный, но более удобный и простой инструмент. Он предназначен для CSS, но позволяет использовать и JavaScript API, чтобы создать анимацию, запускающуюся при прокрутке страницы. Он содержит несколько готовых решений, которые можно сразу же применить к своему проекту.
Если предыдущие два инструмента концентрируются в основном на традиционном вертикальном скролле, то ScrollTrigger создан для разработки сайтов с горизонтальной прокруткой. Он позволяет создавать динамические горизонтальные интерфейсы, наполненные красивыми CSS-анимациями, и достаточно прост в обращении.
Force.js — это компактное решение, не отличающееся богатством вариантов и функционала. Однако оно идеально для таких стандартных задач, как привести объекты в движение или украсить скроллинг, а благодаря эффектам затухания анимация получается чистой и опрятной.
AOS — еще один инструмент для анимации скроллинга с кучей готовых эффектов, запускаемых прокруткой. Если вы хотите сделать на своем сайте красиво появляющиеся секции, но не хотите закапываться в код, AOS подойдет вам.
Rellax позволяет поработать с параллакс-эффектом. Это легкая универсальная JavaScript-библиотека для придания интерфейсу объема.
Tilt.js создает интригующий эффект наклона, основанный на параллаксе. Этот инструмент позволяет наклонить объект, имитируя 3D в стандартной 2D-плоскости. Вы можете отрегулировать ось, а также сделать объект блестящим или парящим.
Transform-when — это отличное решение для создания опыта, основанного на сторителлинге, быстрое и поддерживающее мобильные устройства. Оно строится на двух жизненно важных параметрах: время и позиция скроллинга, — так что вы можете чутко контролировать взаимодействие пользователя с вашим интерфейсом. Решение работает и с векторной графикой, и с обычными элементами HTML.
Это генератор стандартной CSS3-анимации с возможностью просмотра превью. CSS3 Animation включает в себя обычный центр управления, где вы можете задать длительность перехода, количество повторений, хронометраж и так далее. Задайте настройки, скопируйте получившийся код и вставьте его в свой проект.
Curve.js вдыхает жизнь в линии, заставляет их танцевать, кружиться и переливаться. Используйте этот инструмент для создания элегантных геометрических орнаментов.
Animator.js гибок, эффективен и быстр. Это простейший способ управлять ключевыми кадрами и генерировать CSS-анимации различных масштабов. К тому же, это автономный инструмент.
Cel-animation — это миксин для Sass, позволяющий управлять ключевыми кадрами. Вы можете сделать подвижным любой элемент HTML или векторную графику.
Scrollissimo был создан, чтобы вместе с Greensock анимировать объекты при скроллинге. При помощи дополнительного JavaScript-плагина для устройств с сенсорным экраном этот инструмент работает на большинстве девайсов.
Читайте также: Анимация при скроллинге может стоить вам конверсии
jqClouds — это простой плагин, который генерирует парящие облака, чтобы придать статичному интерфейсу динамичный вид. Вы можете заменить облака любыми другими объектами.
Color animation — это инструмент для анимирования тона и прозрачности фона, границ и текста. Работает с цветом любого объекта.
Чтобы предотвратить внезапные скачки и резкие метаморфозы, случающиеся, когда один объект превращается в другой, вы можете использовать Flubber. Единственный минус инструмента в том, что он работает только с 2D-графикой.
Если вам нравится популярная сегодня анимация частиц, вам стоит воспользоваться Particles.js. Этот генератор основан на библиотеке JavaScript, которая берет всю работу на себя. Задайте интересующие вас параметры: цвет, количество, форма, размер, прозрачность и прочее, — и просто экспортируйте результат.
Это небольшой скрипт, не обладающий всеми возможностями плагинов, описанных выше. Тем не менее, он добавляет к вашему интерфейсу красивый фон с анимированными частицами. Вы можете задать цвет, линии, прозрачность и некоторые другие параметры, чтобы фон сочетался с остальными элементами вашего сайта.
Three.js — обширная, многоцелевая библиотека, на которую опирается множество сайтов. Она подойдет и для простых, и для сложных проектов. Она позволяет работать с <canvas>, <svg>, CSS3D и WebGL, чтобы создавать впечатляющие 3D-анимации.
Читайте также: Практические методы дизайна анимации
6 правил анимации на лендингах
Определить области на странице и ситуации, где анимации могут привлечь внимание пользователей, — лишь половина дела. Не менее важно оценить уместность и качество исполнения самой анимации. Чтобы не вызвать отторжения у посетителей вашего лендинга, старайтесь следовать этим 6 правилам:
1. Не анимируйте несколько элементов за раз
Когда несколько объектов приходят в движение одновременно, это отвлекает. Поскольку и мозг, и глаза человека запрограммированы на то, чтобы, прежде всего, уделять внимание движущимся объектам, они так и будут переключаться с одного объекта на другой, а мозгу потребуется дополнительное время, чтобы разобраться в том, что, собственно, происходит (особенно если объекты двигаются очень быстро). Поэтому важно, чтобы элементы анимировались последовательно, друг за другом.
Крайне важно понять концепцию перехода, которая заключается в том, что только согласованная последовательность движений удерживает внимание посетителя. Минимизируйте количество элементов, которые движутся независимо друг от друга; в одно и то же время должно происходить незначительное число событий (не более 2-3). Поэтому, если вы хотите анимировать более 3 объектов, группируйте их и анимируйте как единое целое, а не по отдельности.
2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга
Каждый раз, когда вы добавляете в дизайн анимацию, вы дополняете уже созданный образ. Как именно вы измените его, зависит от выбранного вами эффекта анимации.
Взаимодействие с лендингом происходит в рамках конкретных ожиданий и установок посетителя относительно того, как должен выглядеть и функционировать представленный на нем продукт. Представьте, что вы зашли на лендинг из банковской сферы, но лид-форма, которую вы решили заполнить для консультации, вдруг «подпрыгнула от радости». Не исключено, что вы передумаете предоставлять свои данные, потому что эта прыгающая анимация противоречит вашим ожиданиям: на лендинге из ниши банковских услуг форма должна выглядеть серьезнее и солиднее.
3. Следите за временем
Анимация не должна быть долгой. Она не должна мешать выполнению пользователем основной задачи, потому что даже самая красиво выполненная анимация будет раздражать посетителей лендинга, если будет тормозить их. Оптимальная скорость для анимации пользовательского интерфейса составляет от 200 до 500 миллисекунд.
Когда дело доходит до создания анимированного эффекта, есть один параметр, который оказывает непосредственное влияние на восприятие анимации: синхронизация. Он позволяет дизайнерам добиваться того, чтобы анимация выглядела как можно более естественной, натуральной.
4. Не забывайте о доступности
Анимация — это палка о двух концах. Она может улучшить юзабилити для одной группы пользователей, но одновременно создать проблемы для другой.
Как дизайнер, вы никогда не должны забывать о том, как будут взаимодействовать с вашим дизайном люди с нарушениями зрения. Ознакомьтесь с рекомендациями WCAG по проектированию анимаций и убедитесь, что ваш дизайн не противоречит им.
Кроме того, следует время от времени проводить тестирование юзабилити, чтобы проверить, что у всех пользователей, включая людей с нарушениями зрения, не возникает проблем при работе с вашим сайтом.
5. Проводите тест ваших дизайнерских решений
Проводить эксперименты с разными эффектами анимации — занятие, несомненно, увлекательное. Однако уловить тот момент, когда анимаций достаточно, удается не всегда, и в итоге вы получаете лендинг, который утомляет обилием эффектов и движения. Четких критериев того, когда следует остановиться, нет и не будет, и чтобы убедиться в эффективности анимаций, следует проводить тесты. Будьте готовы потратить время на прототипирование, тестирование и оптимизацию анимационных эффектов.
Ниже несколько советов, к которым следует прислушаться, если вы задумали провести тест своих работ:
- Тестируйте на разном «железе». Качество отображения анимации во многом зависит от того, насколько она требовательна к аппаратным характеристикам компьютера: размеру экрана, производительности GPU и т.д. В результате обладатель более мощного устройства получит от просмотра анимации совершенно иной опыт, нежели человек, владеющий аппаратом с более скромными характеристиками. Учитывайте этот фактор при разработке, чтобы избежать так называемого ботлнекинга (ситуация, когда один из компонентов системы не дает другим компонентам раскрыть весь свой потенциал). Не вините слабые машины; лучше оптимизируйте анимацию так, чтобы она безупречно работала на всех видах устройств.
- Не забывайте про мобильные платформы. Сайты создаются и тестируются на десктопе; тест мобильного опыта и производительность анимации на смартфонах, фаблетах и планшетах часто оставляют на потом и, как правило, забывают. Отсутствие тестирования может стать причиной многочисленных сбоев у мобильных пользователей, а все потому, что некоторые эффекты могут хорошо отображаться на десктопе, но плохо — на мобильных. Чтобы избежать негативной реакции со стороны мобильных юзеров, как можно раньше убедитесь в том, что анимация хорошо работает и на мобильных, и на настольных устройствах.
- Просмотрите анимацию на медленной скорости. Трудно заметить несовершенство анимации (особенно сложной), когда она проигрывается на полной скорости. Когда вы замедляете анимацию (скажем, до одной десятой от нормальной скорости), все недоработки становятся более очевидными. Можете заснять свою анимацию в режиме замедленной съемки и показать ее другим людям, чтобы узнать их мнение.
6. Разработку анимаций следует начинать на ранних этапах работы над дизайном
Многие дизайнеры считают анимацию необязательной функцией, поскольку она перегружает пользовательский интерфейс, усложняет его. Это действительно так, но лишь в тех случаях, когда анимацию добавляют на самом последнем этапе разработки лендинга. В таких проектах анимация не присутствовала на начальных этапах, поэтому никакой важной функции она не выполняет — анимация ради анимации. В этом случае она не принесет пользы посетителям, а только будет отвлекать и раздражать.
Чтобы анимация была полезной, задумайтесь над ее функцией, над тем, где она придется к месту, в самом начале процесса разработки дизайна. Только в этом случае анимация будет естественной для пользовательского опыта.
Читайте также: 4 вида анимации для улучшения юзабилити лендинга
Заключение
Качественная анимация делает ваш лендинг не только модным, современным и визуально привлекательным, но и более эффективным. Если все сделать правильно, то из банальной последовательности блоков ваша страница превратится в яркое представление, которое надолго останется в памяти посетителей.
Высоких вам конверсий!
По материалам: webdesignerdepot.com. Изображение: freepik.com
26-08-2017
CSS свойство-имя-анимации
Пример
Укажите имя для анимации @keyframes:
div {
имя-анимации: mymove;
}
Попробуй сам »
Определение и использование
Свойство имя-анимации определяет имя для
@keyframes анимация.
| Значение по умолчанию: | нет |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет.Прочитать о animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.animationName = «myNEWmove» Попробуй это |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| имя-анимации | 43,0 4,0 -webkit- | 10,0 | 16,0 5,0 -моз- | 9,0 4,0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
Синтаксис CSS
имя-анимации: имя ключевого кадра | нет | начальный | наследование;
Стоимость недвижимости
| Значение | Описание | |
|---|---|---|
| имя ключевого кадра | Задает имя ключевого кадра, который вы хотите привязать к селектору. | |
| нет | Значение по умолчанию.Указывает, что анимация не будет (может использоваться для переопределения анимации, исходящей из каскада) | |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальные | |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
Учебник
CSS: Анимация CSS
Ссылка на HTML DOM: свойство animationName
.
CSS-имя-анимации
<стиль>
.springy-text {
цвет белый;
имя-анимации: упругий-текст;
продолжительность анимации: 1 с;
функция времени анимации: легкость;
задержка анимации: 0 с;
количество итераций анимации: 1;
направление анимации: нормальное;
режим заливки-анимации: вперед;
}
@keyframes springy-text {
0% {
межбуквенный интервал: 1.2em;
цвет белый;
}
100% {
межбуквенный интервал: 0,1 мкм;
оранжевый цвет;
}
}
Анимация!
Свойство CSS animation-name определяет список применяемых анимаций.Каждое имя используется для выбора at-правила @keyframes , которое предоставляет значения свойств для анимации.
Синтаксис
<имя-одиночной-анимации> [‘,’ <имя-одиночной-анимации>] *
Возможные значения
-
наименование Имя at-правила
@keyframes, которое предоставляет значения свойств для анимации.Если имя не соответствует ни одному из правил ключевого кадра , нет никаких свойств для анимации и анимация не выполняется.Установка этого свойства на
нетявно отключает анимацию. Таким образом, если это свойство содержит значениеnone, анимация не выполняется, даже если существует at-правилоключевого кадрас таким именем.
Значение по умолчанию — «».
Кроме того, все свойства CSS также принимают следующие значения ключевых слов для всего CSS в качестве единственного компонента своего значения:
-
начальная - Представляет значение, указанное в качестве начального значения свойства.
-
наследовать - Представляет вычисленное значение свойства родительского элемента.
-
снято - Это значение действует как
при наследованииилипри начальном, в зависимости от того, наследуется свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
Основная информация об имуществе
- Начальное значение
-
нет - Относится к
- Все элементы, а
: дои: послепсевдоэлементов - Унаследовано?
- Нет
- Медиа
- Визуальный
Пример кода
Базовый CSS
имя-анимации: отказов;
Рабочий пример в HTML-документе
<стиль>
.springy-text {
цвет белый;
имя-анимации: упругий-текст;
продолжительность анимации: 1 с;
функция времени анимации: легкость;
задержка анимации: 0 с;
количество итераций анимации: 1;
направление анимации: нормальное;
режим заливки-анимации: вперед;
}
@keyframes springy-text {
0% {
межбуквенный интервал: 1.2em;
цвет белый;
}
100% {
межбуквенный интервал: 0,1 мкм;
оранжевый цвет;
}
}
Анимация!
Попробуй
Спецификации CSS
Поддержка браузера
Следующая таблица предоставлена Caniuse.com показывает уровень поддержки этой функции браузером.
Префиксы поставщиков
Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.
Эта практика не рекомендуется W3C, однако во многих случаях единственный способ проверить свойство — это включить расширение CSS, совместимое с вашим браузером.
Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.
Многие разработчики используют Autoprefixer, постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.
Вы также можете использовать Autoprefixer с препроцессорами, такими как Less и Sass.
.
HTML DOM Style animationName Свойство
❮ Объект стиля
Пример
Изменение свойства animationName элемента
document.getElementById («myDIV»). style.animationName = «myNEWmove»;
Попробуйте сами »
Определение и использование
Свойство animationName устанавливает или возвращает имя для анимации @keyframes.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют Webkit, Moz или O, указывают первую версию, работающую с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| animationName | 43,0 4,0 Веб-набор | 10,0 | 16,0 5,0 млн унций | 9.0 4.0 Веб-набор | 30,0 15,0 Webkit 12.1 12,0 О |
Синтаксис
Вернуть свойство animationName:
объект .style.animationName
Установите свойство animationName:
объект .style.animationName = «none | keyframename | initial | inherit»
Значения собственности
| Значение | Описание |
|---|---|
| нет | Значение по умолчанию.Указывает, что анимация не будет (может использоваться для переопределения анимации, исходящей из каскада) |
| имя ключевого кадра | Задает имя ключевого кадра, который вы хотите привязать к селектору. |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальная |
| унаследовать | Наследует это свойство от своего родительского элемента.Читать про наследство |
Технические характеристики
| Значение по умолчанию: | нет |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство animation-name элемента |
| Версия CSS | CSS3 |
Связанные страницы
Ссылка CSS: свойство animation-name
❮ Объект стиля
.