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
Неплохое решение и легковесное решение с удобным интерфейсом.
Ссылка
Textillate.js
Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).
Минимальный вес: 8кб
Ссылка
Firmin
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 8кб
Ссылка
AliceJS
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 50кб
Ссылка
Motio
Позиционирует себя как «Sprite based animation library», выделяется легковесностью.
Минимальный вес:
Ссылка
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кб
Ссылка
Реализует векторную графику поверх 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 версия каталога с фильтрами по категориям и размеру.
animation-fill-mode — Веб-технологии для разработчиков
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-fill-mode
определяет, как нужно применять стили к объекту анимации до и после ее выполнения.
Синтаксис
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Несколько значений могут быть заданы через запятую. */
/* Каждое значение соответствует для анимации в animation-name.
*/
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 заданы одновременно.
Формальный синтаксис
<single-animation-fill-mode>#где
<single-animation-fill-mode> = none | forwards | backwards | both
Пример
Вы можете посмотреть эффект 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; }
Спецификации
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Да)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? | ? |
Смотрите также
animation-duration — Веб-технологии для разработчиков
Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
Свойство animation-duration
устанавливает длительность анимации во времени за один цикл.
Значение по умолчанию 0s
определяет, что анимация не должна выполняться.
Удобно использовать сокращенное свойство animation
чтобы установить сразу все свойства анимации.
Синтаксис
animation-duration: 6s; animation-duration: 120ms; animation-duration: 1s, 15s; animation-duration: 10s, 30s, 230ms;
Примеры
<time>
- Длительность анимации определяется в секундах
s
или в миллисекундахms
. По умолчанию стоит значение0s
. Отрицательные значения являются недействительными.
Предупреждение: Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными 0s
.
Формальный синтаксис
<time>#
Примеры
Смотрите для примеров CSS анимации.
Спецификации
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 3.0-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | 2.0-webkit | ? | 5.0 (5.0)-moz 16.0 (16.0) |
Нет | Нет | 4.2-webkit | 43.0 |
Смотрите также
animation-name — Веб-технологии для разработчиков
Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-name
задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом @keyframes
, которое задаёт значения свойств для последовательности анимации.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Часто удобно использовать сокращенное свойство animation
для одновременной установки всех свойств анимации.
Синтаксис
animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically;
animation-name: test1; animation-name: test1, animation4; animation-name: none, -moz-specific, sliding;
animation-name: initial animation-name: inherit animation-name: unset
Значения
none
- Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
<custom-ident>
- Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от
a
доz
, цифр от0
до9
, подчеркивания (_
), и/или черты (-
). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может бытьnone
,unset
,initial
, илиinherit
в любой комбинации случаев.
Формальный синтаксис
[ none | <keyframes-name> ]#где
<keyframes-name> = <custom-ident> | <string>
Примеры
См. CSS animations.
Спецификации
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Да)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 |
4.0-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |
Смотрите также
animation-iteration-count — Веб-технологии для разработчиков
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Обзор
CSS свойство animation-iteration-count
определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.
Наиболее удобно использовать это свойство в сокращенном варианте animation
, в котором указываются все анимационные свойства.
Синтаксис
animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3; animation-iteration-count: 2, 0, infinite;
Значения
infinite
- Анимация повторяется бесконечно.
<number>
- Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).
Правила синтаксиса
<single-animation-iteration-count>#где
<single-animation-iteration-count> = infinite | <number>
Примеры
Смотрите примеры CSS анимации.
Спецификации
Совместимость с браузерами
Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Базовая поддержка | (Да)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 |
4.0-webkit |
Возможность | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Базовая поддержка | (Да)-webkit | ? | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | ? | 43.0 |
Также смотрите
CSS-анимация | WebKit
У нас есть еще одна интересная новая функция CSS, о которой стоит поговорить: анимация, заданная в CSS. Здесь есть над чем поговорить, поэтому сначала мы начнем с основ.
Простейший вид анимации, для которой мы добавили поддержку, называется переходом . Обычно, когда значение свойства CSS изменяется, визуализированный результат мгновенно обновляется, причем рассматриваемый элемент немедленно изменяется со старого значения свойства на новое значение свойства.Переходы описывают, как вместо этого выполнять анимацию из старого состояния в новое с течением времени.
Переходы задаются с использованием следующих свойств:
свойство перехода — какое свойство должно анимировать, например, непрозрачность.
transition-duration — Как долго должен длиться переход.
transition-time-function — Временная функция для перехода (например, линейная, легкая и пользовательская кубическая функция Безье).
transition — сокращение для всех трех свойств.
Вот простой пример:
div { непрозрачность: 1; -webkit-transition: непрозрачность 1 с, линейная; } div: hover { непрозрачность: 0; }
Этот div будет исчезать при наведении курсора. В браузерах, которые не поддерживают эту анимацию, произойдет постепенная деградация, так как div просто немедленно исчезнет.
Каждое из этих свойств поддерживает список значений, разделенных запятыми, например несколько фонов CSS3, что позволяет описывать различные переходы для отдельных свойств в одном правиле стиля.Каждое значение в списке соответствует значению в той же позиции в других свойствах.
Например:
div { -webkit-transition-property: непрозрачность, слева; -webkit-transition-duration: 2 с, 4 с; }
В приведенном выше правиле стиля анимация непрозрачности будет длиться более 2 секунд, а левая — более 4 секунд.
Некоторые очень сложные свойства можно анимировать. Возьмем, к примеру, новое свойство -webkit-transform . Вот пример простого эффекта вращения с использованием -webkit-transform и -webkit-transition .
Этот div будет вращаться при нажатии!
Этот div будет вращаться при первом нажатии!
Границы также можно анимировать. Следующее поле имеет простую анимацию границы, при которой граница будет увеличиваться в толщине и менять цвет при наведении курсора.
При наведении курсора этот div приобретет немного более толстую синюю рамку.
Обратите внимание на примеры зависания, что анимация изменится на обратную, когда мышь покинет div.Каждый раз, когда свойство меняет значение, анимация просто запускается снова с текущей позицией в качестве значения from и новым значением в качестве места назначения. Свойства перехода исходного состояния используются, чтобы выяснить, как выполнить анимацию в новое целевое состояние.
Ключевые моменты для понимания переходов:
(1) Это неявная анимация. Сценарии и таблицы стилей могут быть написаны как обычно, а анимация будет происходить неявно при изменении значений свойств.
(2) Они постепенно деградируют. Браузеры, которые не поддерживают переходы, просто не будут анимировать, но в остальном весь код и правила стиля могут остаться прежними.
Вот более подробные описания свойств. Все эти свойства могут принимать несколько значений, разделенных запятыми.
свойство перехода
Значения: нет | все |
Начальное значение: все
Описание: Указывает, какое свойство запускает анимацию.Значение none означает, что перехода нет. Значение все означает, что каждое свойство анимации запускает анимацию. В противном случае анимация сработает только тогда, когда точное указанное свойство изменит значение.
transition-duration
Значения:
функция синхронизации перехода
Значения: легкость | линейный | легкость в | легкость выхода | легкость установки | cubic-bezier (x1, y1, x2, y2)
Начальное значение: easy
Описание: Свойство функции перехода-времени описывает, как анимация будет развиваться во времени.Ключевые слова могут использоваться для общих функций или контрольные точки для кубической функции Безье могут быть заданы для полного управления функцией перехода. Чтобы указать кубическую функцию Безье, вы задаете значения X и Y для 2 контрольных точек кривой. Точка P0 неявно установлена в (0,0), а P3 неявно установлена в (1,1). Эти 4 точки используются для вычисления кубической кривой Безье.
Ключевые слова функции синхронизации имеют следующие определения:
linear — Линейная функция просто возвращает в качестве своего вывода полученные входные данные.
по умолчанию легкость — функция по умолчанию, легкость, эквивалентна кубическому безье (0,25, 0,1, 0,25, 1,0).
easy-in — Функция упрощения эквивалентна кубической кривой Безье (0,42, 0, 1,0, 1,0).
easy-out — Функция ускорения эквивалентна кубической кривой Безье (0, 0, 0,58, 1,0).
easy-in-out — функция easy-in-out эквивалентна кубической кривой Безье (0,42, 0, 0,58, 1.0).
cubic-bezier — задает кубическую кривую Безье, точки P0 и P3 которой равны (0,0 ) и (1,1) соответственно. Четыре значения определяют точки P1 и P2 кривой как (x1, y1, x2, y2).
В следующих статьях я более подробно расскажу о переходах, а также расскажу о еще одной функции, которую мы добавляем: явная анимация. Мы также готовим более подробное предложение (полное устрашающих спецификаций), в котором изложены наши мысли о преобразованиях, анимации и других продвинутых визуальных эффектах.
[1 декабря 2008 г. — обновлены значения функции синхронизации, чтобы отразить новую реализацию. «По умолчанию» теперь называется «легкостью». См. Подробные сведения в спецификации переходов CSS.]
.Animate.css
Animate.cssCSS-анимация с добавлением воды
Посмотреть анимацию
Закрыть списокИщущие внимания
- подпрыгивать Скопировать имя класса в буфер обмена
- вспышка Скопировать имя класса в буфер обмена
- пульс Скопировать имя класса в буфер обмена
- резинка Скопировать имя класса в буфер обмена
- shakeX Скопировать имя класса в буфер обмена
- дрожь Скопировать имя класса в буфер обмена
- голова Скопировать имя класса в буфер обмена
- качели Скопировать имя класса в буфер обмена
- тада Скопировать имя класса в буфер обмена
- колебаться Скопировать имя класса в буфер обмена
- желе Скопировать имя класса в буфер обмена
- сердцебиение Скопировать имя класса в буфер обмена
Черные подъезды
- backInDown Скопировать имя класса в буфер обмена
- backInLeft Скопировать имя класса в буфер обмена
- backInRight Скопировать имя класса в буфер обмена
- backInUp Скопировать имя класса в буфер обмена
Обратные выходы
- назадOutDown Скопировать имя класса в буфер обмена
- backOutLeft Скопировать имя класса в буфер обмена
- backOutRight Скопировать имя класса в буфер обмена
- backOutUp Скопировать имя класса в буфер обмена
Входы с подпрыгиванием
- bounceIn Скопировать имя класса в буфер обмена
- bounceInDown Скопировать имя класса в буфер обмена
- bounceInLeft Скопировать имя класса в буфер обмена
- bounceInRight Скопировать имя класса в буфер обмена
- bounceInUp Скопировать имя класса в буфер обмена
Прыгающие выходы
- bounceOut Скопировать имя класса в буфер обмена
- bounceOutDown Скопировать имя класса в буфер обмена
- bounceOutLeft Скопировать имя класса в буфер обмена
- bounceOutRight Скопировать имя класса в буфер обмена
- bounceOutUp Скопировать имя класса в буфер обмена
Затухающие входы
- исчезать Скопировать имя класса в буфер обмена
- fadeInDown Скопировать имя класса в буфер обмена
- fadeInDownBig Скопировать имя класса в буфер обмена
- fadeInLeft Скопировать имя класса в буфер обмена
- fadeInLeftBig Скопировать имя класса в буфер обмена
- fadeInRight Скопировать имя класса в буфер обмена
- fadeInRightBig Скопировать имя класса в буфер обмена
- fadeInUp Скопировать имя класса в буфер обмена
- fadeInUpBig Скопировать имя класса в буфер обмена
- fadeInTopLeft Скопировать имя класса в буфер обмена
- fadeInTopRight Скопировать имя класса в буфер обмена
- fadeInBottomLeft Скопировать имя класса в буфер обмена
- fadeInBottomRight Скопировать имя класса в буфер обмена
Выходы замираний
- исчезать Скопировать имя класса в буфер обмена
- fadeOutDown Скопировать имя класса в буфер обмена
- fadeOutDownBig Скопировать имя класса в буфер обмена
- fadeOutLeft Скопировать имя класса в буфер обмена
- fadeOutLeftBig Скопировать имя класса в буфер обмена
- fadeOutRight Скопировать имя класса в буфер обмена
- fadeOutRightBig Скопировать имя класса в буфер обмена
- fadeOutUp Скопировать имя класса в буфер обмена
- fadeOutUpBig Скопировать имя класса в буфер обмена
- fadeOutTopLeft Скопировать имя класса в буфер обмена
- fadeOutTopRight Скопировать имя класса в буфер обмена
- fadeOutBottomRight Скопировать имя класса в буфер обмена
- fadeOutBottomLeft Скопировать имя класса в буфер обмена
Ласты
- кувырок Скопировать имя класса в буфер обмена
- flipInX Скопировать имя класса в буфер обмена
- переворот Скопировать имя класса в буфер обмена
- flipOutX Скопировать имя класса в буфер обмена
- flipOutY Скопировать имя класса в буфер обмена
Скорость света
- lightSpeedInRight Скопировать имя класса в буфер обмена
- lightSpeedInLeft Скопировать имя класса в буфер обмена
- lightSpeedOutRight Скопировать имя класса в буфер обмена
- lightSpeedOutLeft Скопировать имя класса в буфер обмена
Ворота поворотные
- rotateIn Скопировать имя класса в буфер обмена
- rotateInDownLeft Скопируйте имя класса в буфер обмена
Свойство CSS-анимации
Пример
Привязка анимации к элементу
div
{
анимация: mymove 5s infinite;
}
Определение и использование
Свойство animation
является сокращенным свойством для:
Примечание: Всегда указывайте свойство animation-duration, иначе длительность равна 0, и никогда не будет воспроизводиться.
Значение по умолчанию: | нет 0 легкость 0 1 нормальная не работает |
---|---|
Унаследовано: | № |
Анимированные: | нет. Прочитать о animatable |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.animation = «mymove 5s бесконечное» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют -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: свойство анимации
.
animate-css / animate.css: 🍿 Кроссбраузерная библиотека CSS-анимации. Так же легко использовать, как и легкую вещь.
перейти к содержанию Зарегистрироваться-
Почему именно GitHub?
Особенности →
- Обзор кода
- Управление проектами
- Интеграции
- Действия
- Пакеты
- Безопасность
- Управление командой
- Хостинг
- мобильный
- Истории клиентов →
- Безопасность →
- Команда
- Предприятие
-
Проводить исследования
- Изучите GitHub →
Учитесь и вносите свой вклад
- Темы
- Коллекции
- В тренде
- Учебная лаборатория
- Руководства с открытым исходным кодом
Общайтесь с другими
- События
- Форум сообщества