Css keyframes animation delay

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

Страницы

Проекты

Источник

CSS-анимации

Большой набор свойств для создания настоящих живых анимаций.

1. Кратко
2. @keyframes
3. animation-name
4. animation-duration
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
   1. linear
   2. ease
   3. ease-in
   4. ease-out
   5. ease-in-out
   6. cubic-bezier(x1, y1, x2, y2)
   7. step-start
   8. step-end
   9. steps(количество шагов, положение шага)

   Обновлено 24 октября 2022

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Веб в процессе развития из текста с картинками превратился в интерактивное пространство. Заходя на разные сайты, вы постоянно видите анимации. От микроскопических реакций на наведение курсора до сложных сцен.

   

   Вернёмся к нашему розовому кругу и укажем, что он должен превращаться в синий квадрат нелинейно, медленно разгоняясь к концу анимации.

    .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in;> .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

   Анимация стала более естественной, не такой компьютерной.

   Пришло время заняться правой фигурой и превратить синий квадрат в розовый круг. Используем практически те же самые свойства, что и для круга, только зададим другое значение для свойства animation — direction , чтобы шаги анимации воспроизводились в обратном порядке:

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

   Сейчас обе фигуры меняются синхронно. Добавим правой фигуре небольшую задержку.

   animation — delay

   Скопировать ссылку «animation-delay» Скопировано

   Свойство задаёт задержку воспроизведения анимации. Значением может быть любое число, как отрицательное, так и положительное.

   Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.

   Пусть анимация правого элемента начнётся с задержкой -2.5 секунды. Так она будет начинаться с середины:

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s; >    Скопировать Скопировано Не удалось скопировать   

   animation — play — state

   Скопировать ссылку «animation-play-state» Скопировано

   Свойство, позволяющее ставить анимацию на паузу и запускать снова.

   • running — анимация проигрывается (значение по умолчанию).
   • paused — анимация ставится на паузу. При повторном запуске анимации она продолжается с того места, где была остановлена.

   Добавим возможность взаимодействовать с нашей анимацией. Пусть по наведению курсора анимация ставится на паузу, а если курсор убран, то продолжает проигрываться.

    .child:hover  animation-play-state: paused;> .child:hover  animation-play-state: paused; >    Скопировать Скопировано Не удалось скопировать   

   animation — fill — mode

   Скопировать ссылку «animation-fill-mode» Скопировано

   Последнее свойство анимации — animation — fill — mode — сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.

   • none — стили анимации не применяются до и после проигрывания анимации (значение по умолчанию).
   • forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
   • backwards — после окончания анимации к элементу будут применены стили первого ключевого кадра.
   • both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

   Для лучшего понимания работы этих значений посмотрите демо 👇

   animation

   Скопировать ссылку «animation» Скопировано

   animation — это мега-шорткат, в котором можно за раз указать значения для всех перечисленных выше свойств, начинающихся на animation — .

   Значения указываются через пробел. Порядок указания значений не важен. Из-за того, что значения этих свойств очень разные, браузер сам догадывается, какое значение к какому свойству относится. Важно только помнить, что первое значение времени будет воспринято как значение animation — duration (длительность анимации), а второе — animation — delay (задержка воспроизведения).

   Для работы анимации совсем не обязательно перечислять все значения. Достаточно указать имя анимации и её длительность. Для остальных свойств будут установлены значения по умолчанию.

    .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s;> .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s; >    Скопировать Скопировано Не удалось скопировать   

   Несколько анимаций

   Скопировать ссылку «Несколько анимаций» Скопировано

   Есть возможность применить к одному элементу сразу несколько анимаций. Для этого нужно перечислить несколько значений через запятую. Возможно указать любое количество значений для любого из свойств анимации. Анимации будут воспроизводиться одновременно.

   Например, разобьём предыдущую анимацию на две отдельные. Одна будет отвечать за изменение формы элемента, а вторая за изменение цвета.

    @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; >> @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; >> @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; > > @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; > >    Скопировать Скопировано Не удалось скопировать   

   И присвоим обе анимации одному элементу, при этом задав первой задержку, и указав разное время воспроизведения.

    .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite;> .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite; >    Скопировать Скопировано Не удалось скопировать   

   В итоге форма меняется за 10 секунд, а цвет перетекает из розового в синий за 5 секунд. А потом обратно. Очень красиво и медитативно 🙌

   Источник

   Читайте также:  Сортировка методом отбора python