| <div> | |
| <div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div> | |
| body { | |
| margin: 0; | |
| background: white; /*скрываем облака, когда они будут выходит за границы голубого блока*/ | |
| } | |
. picture { | |
| width: 270px; | |
| height: 270px; | |
| background: #CFDEE6; | |
| border-radius: 50%; | |
| margin: 50px auto 0; | |
| position: relative; /*задаем относительное позиционирование, чтобы абсолютно позиционировать элементы внутри*/ | |
| overflow: hidden; /*скрываем облака, когда они будут уходить за границы блока*/ | |
| } | |
| @-webkit-keyframes clouds { | |
50% {left: 270px; opacity: 0. 5} /*перемещаем блок с облаками за правый край голубого блока, постепенно делая блок прозрачным*/ | |
| 51% {opacity: 0;} /*чтобы когда он начал перемещаться за левый край голубого блока, его не было видно*/ | |
| 100% {opacity: 0; left: -110px;} /*смещаем блок с облаками за левую границу голубого блока*/ | |
| } | |
| @keyframes clouds { | |
| 50% {left: 270px; opacity: 0.5} | |
| 51% {opacity: 0;} | |
| 100% {opacity: 0; left: -110px;} | |
| } | |
| .clouds { | |
| width: 110px; | |
| height: 40px; | |
| position: relative; | |
| overflow: hidden; | |
| top: 60px; | |
| left: -110px; | |
| -webkit-animation: clouds 20s linear infinite; | |
| animation: clouds 20s linear infinite; | |
| } | |
. | |
| width: 110px; | |
| height: 40px; | |
| position: relative; | |
| overflow: hidden; | |
| top: 20px; | |
| left: -110px; | |
| -webkit-animation: clouds 20s linear infinite 10s; /*добавляем для второго блока с облаками задержку в анимации*/ | |
| animation: clouds 20s linear infinite 10s; | |
| } | |
| .cloud { | |
| background: white; | |
| position: absolute; | |
| } | |
. one { | |
| width: 30px; | |
| height: 15px; | |
| border-radius: 60px 60px 0 0; | |
| top: 0; | |
| left: 0; | |
| } | |
| .two { | |
| width: 24px; | |
| height: 10px; | |
| border-radius: 48px 48px 0 0; | |
| top: 30px; | |
| left: 30px; | |
| } | |
. three { | |
| width: 30px; | |
| height: 15px; | |
| border-radius: 60px 60px 0 0; | |
| top: 25px; | |
| left: 80px; | |
| } |
Свойство animation-direction — направление анимации
Свойство animation-direction задает
направление анимации. По умолчанию анимация
повторится только 1 раз и затем
вернется в исходное состояние, затем,
если задана задержка animation-delay,
будет ждать заданное время и потом цикл начнется
сначала.
Данное свойство позволяет поменять это поведение, например, так чтобы анимация после окончания оставалась в том месте, где она закончилась
Также можно задать такое поведение: анимация
дойдет до крайней точки и вернется обратно
(как в transition).
Смотрите описание ниже.
Синтаксис
селектор {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Значения
| Значение | Описание |
|---|---|
reverse | Анимация будет проигрываться в обратном направлении. |
alternate | Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition). |
alternate-reverse | Анимация будет проигрываться из конечного положения
в начальное и обратно. По сути это значения alternate и reverse в одном флаконе. |
normal | Анимация будет проигрываться от начала к концу, а после
окончания скачком перескакивать в начальное положение. |
Значение по умолчанию: normal.
Пример
Сейчас элемент будет двигаться в одну сторону,
а потом возвращаться обратно, так как задано
значение animation-duration имеет значение 3 секунды и это значит,
что перемещения «туда» и «обратно» будут
длиться по 3 секунды:
<div></div>@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: alternate;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):
<div></div>@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример
Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):
<div></div>@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-direction: alternate-reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Смотрите также
- свойство
animation-name,
которое задает имя анимации - свойство
animation-duration,
которое задает продолжительность анимации - свойство
animation-delay,
которое задает задержку перед выполнением анимации - свойство
animation-timing-function,
которое задает скорость выполнения анимации - свойство
animation-iteration-count,
которое задает количество итераций анимации - свойство
animation-fill-mode,
которое задает состояние анимации - свойство
animation-play-state,
которое позволяет поставить анимацию на паузу - свойство
animation,
представляющее собой сокращение для анимаций - команду
@keyframes,
задающую ключевые кадры анимации - плавные переходы
transition, представляющие собой анимацию по наведению на элемент
Анимация CSS Свойство
❮ Назад Полное руководство по CSS Далее ❯
Пример
Привязка анимации к элементу
div
{
анимация: mymove 5s бесконечно;
}
Попробуйте сами »
Определение и использование
Свойство animation является сокращенным свойством для:
- имя-анимации
- продолжительность анимации
- функция синхронизации анимации
- анимация-задержка
- число итераций анимации
- направление анимации
- режим анимации-заполнения
- состояние воспроизведения анимации
Примечание: Всегда указывайте свойство animation-duration, иначе продолжительность равна 0 и никогда не будет воспроизводиться.
Показать демо ❯
| Значение по умолчанию: | нет 0 легкий 0 1 обычный нет работает |
|---|---|
| Унаследовано: | нет |
| Анимация: | №. Читать про анимированный |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.animation=»mymove 5s бесконечно» Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Собственность | |||||
|---|---|---|---|---|---|
| анимация | 43.0 4.  0 -вебкит- | 10,0 | 16,0 5,0 -мунц- | 9.0 4.0 -вебкит- | 30,0 15,0 -webkit- 12,0 -o- |
Синтаксис CSS
анимация: имя продолжительность функция времени задержка количество итераций направление воспроизведения в режиме заполнения ;
Значения свойств
| Значение | Описание |
|---|---|
| имя-анимации | Указывает имя ключевого кадра, который вы хотите привязать к селектору |
| продолжительность анимации | Указывает, сколько секунд или миллисекунд требуется для завершения анимации |
| функция синхронизации анимации | Задает кривую скорости анимации |
| задержка анимации | Указывает задержку перед запуском анимации |
| число итераций анимации | Указывает, сколько раз должна воспроизводиться анимация |
| анимация-направление | Указывает, должна ли анимация воспроизводиться в обратном порядке в чередующихся циклах |
| режим анимации-заполнения | Указывает, какие значения применяются анимацией вне времени ее выполнения |
| состояние воспроизведения анимации | Указывает, запущена анимация или приостановлена |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный |
| унаследовать | Наследует это свойство от родительского элемента. Читать о наследовать |
Связанные страницы
Учебник по CSS: CSS-анимация
Ссылка на HTML DOM: свойство анимации
❮ Предыдущая Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
3 Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
CSS animation-delay Свойство
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Запустить анимацию через 2 секунды:
div {
animation-delay: 2s;
}
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Задержка анимации 9Свойство 0020 указывает задержку начала анимации.
Значение задержки анимации определяется в секундах (с) или миллисекундах (мс).
| Значение по умолчанию: | 0 с |
|---|---|
| По наследству: | нет |
| Анимация: | №. Читать про анимированный |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.animationDelay="1s" Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Собственность | |||||
|---|---|---|---|---|---|
| анимация-задержка | 43. 0 4.0 -вебкит- | 10,0 | 16,0 5,0 -мунц- | 9.0 4.0 -вебкит- | 30,0 15,0 -webkit- 12,0 -o- |
Синтаксис CSS
animation-delay: time |initial|inherit;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| время | Дополнительно. Определяет количество секунд (s) или миллисекунд (ms) ожидания перед запуском анимации. Значение по умолчанию — 0. Допускаются отрицательные значения. Если вы используете отрицательные значения, анимация начнется так, как если бы она уже играл в течение N секунд/миллисекунд. | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Дополнительные примеры
Пример
Использование отрицательных значений. Здесь анимация начнется так, как если бы она уже воспроизводится в течение 2 секунд:
div {
animation-delay: -2s;
}
Попробуйте сами »
Связанные страницы
Учебник по CSS: Анимация CSS
Ссылка HTML DOM: свойство animationDelay
❮ Назад Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 9003 Tops
9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.