Как остановить анимацию в css
Перейти к содержимому

Как остановить анимацию в css

  • автор:

Свойство animation-fill-mode

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

Синтаксис

Значения

Значение Описание
none Если установлена задержка анимации — то в течении времени задержки элемент будет оставаться на месте, а потом скачком перейдет к 0% кадру. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
backwards Заставляет элемент двигаться после загрузки страницы к 0% кадру, даже если установлена задержка animation-delay , и оставаться там, пока не начнется анимация. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
forwards Указывает браузеру, что после окончания анимации элемент останется в том состоянии, где остановился.
both Включает в себя backwards и forwards — после загрузки страницы элемент установится к 0% кадру, а после окончания анимации элемент останется там, где остановился.

Значение по умолчанию: none .

Пример . Значение none

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px . Так как нет задержки animation-delay , то элемент после загрузки страницы станет в 0px , а не в 300px . Кроме того, анимация после окончания будет перепрыгивать в начальное значение:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример . Значение none

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px . Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px , а не в 0px , и будет стоять там 3 секунды после начала анимации а потом скачком перейдет к 0px — и анимация начнется оттуда. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример . Значение backwards

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px . Также для элемента установлен animation-fill-mode в значении backwards , поэтому элемент после загрузки страницы станет в 0px , а не в 300px , как это было для animation-fill-mode в значении none . Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: backwards; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример . Значение none и количество повторений равно 1

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px . Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px , а не в 0px , и будет стоять там 3 секунды после начала анимации а потом скачком перейдет к 0px — и анимация начнется оттуда. Так как animation-fill-mode установлен в значении none, то после проигрывания анимации элемент вернется в начальное значение:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: none; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример . Значение forwards и количество повторений равно 1

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

Кроме того, margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px . Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px , а не в 0px , и будет стоять там 3 секунды после начала анимации, а потом скачком перейдет к 0px — и анимация начнется оттуда:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: forwards; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример . Значение both и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении both , а число повторений анимации — в 1 . После загрузки страницы элемент будет стоять в первом кадре анимации (в 0px , а не в 300px ), а после проигрывания анимации элемент останется в том положении, где закончилась анимация, а не прыгнет в исходную точку:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < margin-left: 300px; animation-fill-mode: both; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; 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-direction ,
    которое задает направление анимации
  • свойство animation-play-state ,
    которое позволяет поставить анимацию на паузу
  • свойство animation ,
    представляющее собой сокращение для анимаций
  • команду @keyframes ,
    задающую ключевые кадры анимации
  • плавные переходы transition , представляющие собой анимацию по наведению на элемент

Очень простое руководство по CSS3-анимациям

Я постарался написать настолько понятное и простое руководство по CSS3-анимациям, насколько это вообще возможно. Итак, приступим!

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию.
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Анимация представляет собой набор ключевых кадров, который содержится в css и выглядит вот так:

@keyframes test-animation < 0% < width: 50px; > 100% < width: 150px; > > 

Давайте разберёмся что мы здесь видим. Ключевое слово @keyframes указывает на саму анимацию. Далее идет её имя, я назвал её test-animation . В фигурных скобках находится список ключевых кадров. В данном случае это начальный кадр 0% и конечный кадр 100% . Также начальный и конечный кадры можно записать ключевыми словами from и to .

Теперь посмотрите на следующий код. Так тоже можно написать:

@keyframes test-animation < from < width: 50px; > 30% < width: 99px; > 60.8% < width: 120px; > to < width: 150px; > > 

Обратите внимание, если не задан начальный ( from , 0% ) или конечный ( to , 100% ) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

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

Подключение анимации к элементу происходит двумя командами:

element < animation-name: current-anim-name; animation-duration: 2s; > 

В правиле animation-name задаётся имя созданной вами анимации @keyframes . Правило animation-duration указывает сколько секунд анимация будет воспроизводиться. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms) .

Ключевые кадры можно группировать:

@keyframes animation-name < 0%, 35% < width: 100px; > 100% < width:200px; > > 

Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:

element < animation-name: animation-1, animation-2; animation-duration: 2s, 4s; > 

Задержка анимации

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах:

element < animation-name: animation-1; animation-duration: 2s; animation-delay: 5s; // Перед стартом этой анимации пройдет 5 сек. > 

Количество проигрываний анимации

В качестве значения свойства animation-iteration-count выставляем любое положительное значение от 0, 1, 2, 3… и т.д. либо infinite для бесконечного повторения.

element < animation-name: animation-1; animation-duration: 2s; animation-delay: 5s; animation-iteration-count: 3; //эта анимация проиграется 3 раза > 

Состояние ДО и ПОСЛЕ анимации

Свойство animation-fill-mode определяет в каком состоянии будет элемент до начала анимации и после её завершения.

  • animation-fill-mode: forwards; — после завершения анимации состояние элемента будет соответствовать последнему кадру.
  • animation-fill-mode: backwards; — после завершения анимации состояние элемента будет соответствовать первому кадру.
  • animation-fill-mode: both; — до начала анимации состояние элемента будет соответствовать первому кадру, а после окончания — последнему.

В примере ниже трём элементам назначена одна и та же анимация, но каждый элемент имеет разные значения animation-fill-mode :

Запуск и остановка анимации

Осуществляем с помощью свойства animation-play-state , который принимает только 2 значения: либо running , либо paused . Тут всё просто 🙂

Направление анимации

С помощью свойства animation-direction мы можем управлять направлением воспроизведения анимации. Его параметры могут принимать несколько значений:

  • animation-direction: normal; — анимация проигрывается вперёд, это обычное направление анимации.
  • animation-direction: reverse; — анимация проигрывается в обратном направлении, от to к from .
  • animation-direction: alternate; — чётные проигрывания анимации будут идти в обратном направлении, а нечётные — в обычном.
  • animation-direction: alternate-reverse; — чётные проигрывания вашей анимации будут проигрываться в обычном направлении, а нечётные — в обратном.

Функция распределения анимируемых значений по времени

Правило animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end.

Однако такие функции можно создавать самому. Специальная функция animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на http://cubic-bezier.com/ или https://matthewlein.com/ceaser/.

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps(количество шагов, направление) , в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end . В следующем примере анимация будет состоять из 7 шагов, последний из которых будет сделан непосредственно перед завершением анимации:

element < animation-timing-function: steps(7, end); > 

График

Посмотреть на CodePen: Форма анимации.

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

CSS-анимации имеют довольно хорошую поддержку, и со временем она будет становится все лучше. Подробно о поддержке анимаций десктопными и мобильными браузерами можно узнать из таблицы Can I use.

Материалы для дальнейшего изучения

  • Animate.css — самая знаменитая библиотека CSS-анимаций.
  • Effect.css — не менее известная библиотека анимаций.
  • CSS3 Animation Cheat Sheet — отличная подборка примеров.
  • Курс CSS3 анимаций на htmlacademy — лучшее место, чтобы освоить анимации на практике. Платно, но очень дешево.
  • MDN CSS Animation — самый актуальный справочник по анимациям.
  • Обязательно поиграйте с Bounce.js. Крутейшие и супер-плавные эффекты.
  • Motion-ui-design — крутая коллекция ссылок по анимациям от @fliptheweb.

На этом всё! Есть несколько мелочей, которые мы не рассмотрели, подробнее о них можно прочесть в приведённых выше материалах. Однако вы должны знать, что и без них вы только что изучили CSS3-анимации примерно на 97,8%. Поздравляю 🙂

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Как остановить css3 анимацию на последнем ключевом кадре?

Как остановить проигрывание анимации когда она доходит до последнего ключевого кадра?

  • Вопрос задан более трёх лет назад
  • 7339 просмотров

Комментировать

Решения вопроса 1

font-size:30rem

animation-fill-mode:forwards

Ответ написан более трёх лет назад

Нравится 2 1 комментарий

Lizard-108

Web Lizard @Lizard-108 Автор вопроса

Ответы на вопрос 2

Ivanq

Знаю php, js, html, css

Ответ написан более трёх лет назад

Lizard-108

Web Lizard @Lizard-108 Автор вопроса

Оно возвращает анимацию к исходному состоянию, а надо чтобы она застыла на состоянии 100%

HamSter007

HamSter @HamSter007

HTML/CSS верстальщик

animation-fill-mode: both; — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • 46 минут назад
  • 7 просмотров

Как прекратить проигрывание css анимации при ховере?

Привет, подскажите, есть у объекта анимация preserve-3d бесконечная, в спокойном состоянии вращается.. при ховере запускается другая 3d анимация по кейфреймам, соответственно они проигрываются одновременно, как при ховере прекратить анимацию, оставив объект в текущем положении и применить эффект при наведении, а при ауте проиграть анимацию возврата к первоначальной точке и начать заново свободную анимацию?

Возврат я так понимаю делается через transition по продолжительности равный задержке первой анимации — это правильно?

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

  • Вопрос задан более трёх лет назад
  • 2619 просмотров

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *