Содержание

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 версия каталога с фильтрами по категориям и размеру.

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.css

CSS-анимация с добавлением воды

Посмотреть анимацию

Закрыть список

Ищущие внимания

  • подпрыгивать Скопировать имя класса в буфер обмена
  • вспышка Скопировать имя класса в буфер обмена
  • пульс Скопировать имя класса в буфер обмена
  • резинка Скопировать имя класса в буфер обмена
  • 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 →
    Учитесь и вносите свой вклад
    • Темы
    • Коллекции
    • В тренде
    • Учебная лаборатория
    • Руководства с открытым исходным кодом
    Общайтесь с другими
    • События
    • Форум сообщества
.