Webkit animation: CSS3-анимация (свойство 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 версия каталога с фильтрами по категориям и размеру.

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  
  Значения:   
  Начальное значение:  0 
  Описание:  Определяет, сколько времени должен занять переход. По умолчанию 0. 
  функция синхронизации перехода  
  Значения:  легкость | линейный | легкость в | легкость выхода | легкость установки | 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 → 

 Учитесь и вносите свой вклад 

 Темы 
 Коллекции 
 В тренде 
 Учебная лаборатория 
 Руководства с открытым исходным кодом 

 Общайтесь с другими 

 События 
 Форум сообщества 
 
 
 
 
.
No related posts.

Значение по умолчанию:	нет 0 легкость 0 1 нормальная не работает
Унаследовано:	№
Анимированные:	нет. Прочитать о animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.animation = «mymove 5s бесконечное» Попытайся

animation-delay | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

Список лучших инструментов для web-анимации / Хабр

SVG

DOM

Canvas

Scroll

Easing

GUI

CSS

animation-fill-mode — Веб-технологии для разработчиков

Описание

Синтаксис

Значения

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

Пример

HTML

CSS

Спецификации

Совместимость с браузерами

Смотрите также

animation-duration — Веб-технологии для разработчиков

Описание

Синтаксис

Примеры

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

Примеры

Спецификации

Совместимость с браузерами

Смотрите также

animation-name — Веб-технологии для разработчиков

Описание

Синтаксис

Значения

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

Примеры

Спецификации

Совместимость с браузерами

Смотрите также

animation-iteration-count — Веб-технологии для разработчиков

Обзор

Синтаксис

Значения

Правила синтаксиса

Примеры

Спецификации

Совместимость с браузерами

Также смотрите

CSS-анимация | WebKit

Animate.css

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

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

Черные подъезды

Обратные выходы

Входы с подпрыгиванием

Прыгающие выходы

Затухающие входы

Выходы замираний

Ласты

Скорость света

Ворота поворотные

Свойство CSS-анимации

Пример

Определение и использование

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

Синтаксис CSS

Стоимость недвижимости

Связанные страницы

animate-css / animate.css: 🍿 Кроссбраузерная библиотека CSS-анимации. Так же легко использовать, как и легкую вещь.

Учитесь и вносите свой вклад

Общайтесь с другими

Добавить комментарий Отменить ответ

Рубрики