Css Animation
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
@keyframes move 40% left: 50%; bottom: 75%; animation-timing-function: ease-in; > 80% left: 90%; bottom: -10em; > >.sun animation: move 15s infinite linear; >infinite — бесконечное повторение
@keyframes
Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.
Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации ( animation-timing-function ):
Animation-name
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
animation-name: move; — одна анимация.
animation-name: move, sun-color; — две анимации, имена задаются через запятую.
Animation-duration
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-timing-function
Плавная анимация
ease — скольжение (значение по умолчанию)
ease-in — ускорение к концу
ease-out — ускорение в начале
ease-in-out — более плавное скольжение, чем ease
cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.
Пошаговая анимация
step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с
step-start изменения происходят в начале шага, а с
step-end . Если выставить step-start , счетчик будет начинаться с единиц.
steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
Animation-iteration-count
число — сколько раз проиграть анимацию. infinite — бесконечное повторение.
Animation-direction
normal — анимация проигрывается в обычном направлении, с начала и до конца.
reverse — анимация проигрывается в обратном направлении, то есть с конца.
alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении.
alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.
Animation-play-state
running — анимация проигрывается (значение по умолчанию).
paused — анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :
Animation-delay
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-fill-mode
Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.
none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.
forwards — анимация воздействует на элемент по окончании воспроизведения.
backwards — анимация воздействует на элемент до начала воспроизведения.
both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.
Все эти свойства можно записать с помощью короткой записи, например:
animation: timing 5s infinite alternate;Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.
Сайдбар
Статьи
- Математические функции в CSS
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа «прошить» элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
Проекты
animation-delay
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
Try it
It is often convenient to use the shorthand property animation to set all animation properties at once.
Syntax
/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* Multiple animations */ animation-delay: 2.1s, 480ms; /* Global values */ animation-delay: inherit; animation-delay: initial; animation-delay: revert; animation-delay: revert-layer; animation-delay: unset;
Values
The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds ( s ) or milliseconds ( ms ). The unit is required.
A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of 0s , which is the default, indicates that the animation should begin as soon as it’s applied.
A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.
Note: When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the animation-name s appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.
Note: animation-delay has no effect on CSS scroll-driven animations.
Formal definition
animation — delay
Свойство задаёт задержку воспроизведения CSS-анимации.
Пример
Скопировать ссылку «Пример» Скопировано
.element animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: 1s;>.element animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: 1s; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Значением может быть любое число, как отрицательное, так и положительное. Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Подробнее об анимациях написано в статье «CSS-анимации».