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

Красивые анимации состояний с помощью animation-play-state

Если CSS-анимация применяется сразу при загрузке страницы, все просто. Можно просто использовать CSS-свойство animation , и все. Но что делать, если анимация применяется к определенному состоянию, например по :hover , :active , :focus или просто при изменении класса с помощью JavaScript?

Простое решение будет выглядеть приблизительно так:

Однако, это значит, что когда вы уберете курсор с элемента он резко вернется в свое начальное состояние (в котором отсутствует вращение). В большинстве случаев будет предпочтительно остановить анимацию на последнем показанном кадре и оставить в таком состоянии до того момента, как пользователь снова наведет курсор на элемент. Чтобы добиться такого эффекта, мы можем применить анимацию, изначально добавив animation-play-state: paused; , и изменять значение этого свойства по :hover на animation-play-state: running; . Вот что у нас получится:

Я обнаружила это, когда помогала моему другу Джулиану (Julian) с его одностраничником. Когда вы наводите курсор на элемент figure , содержащий фотографию, она начинает скроллиться, но когда он выходит за границы элемента, фотография не возвращается в свое начальное состояние, что смотрелось бы весьма скверно.

Но будьте осторожны, пока это все работает не слишком хорошо, например, есть баги с отрисовкой в Firefox и IE (примечание переводчика: я таковых не заметил.), кроме того картину портят несколько CSS-свойств, которые пока не поддерживаются (например, baseline-shift в SVG), но все это проблемы, которые я буду решать в следующий раз, когда столкнусь с ними, выполняя очередную задачу, и все это опять выльется в то, что работа займет намного больше, чем та пара часов, которые я планировала на неё потратить. Кроме анимаций на этом одностраничнике вас могут заинтересовать пуговицы, сделанные на чистом css (видите, чего я понаделала?) или тиснение на кожаной рамке вокруг фотографии. Твидовый фон и цветовая гамма — заслуга Лоры Калбег (Laura Kalbag). Кроме того, в процессе работы над этим проектом я экспериментировала с SASS, и работать с ним оказалось намного приятнее, чем с LESS, так что в случаях, когда мне нужен препроцессор, буду теперь использовать его.

Очень простое руководство по 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

CSS-анимация: специфика, виды, правила создания и примеры

Часто молодые веб-разработчики знают, что есть такое понятие , как CSS-анимация , и ищут примеры того, как это реализовывается. Анимация придает сайтам динамичность и живость. Не анимированные сайты потихоньку уходят в прошлое, так как современному пользователю нужно «движение».

Искать примеры готовой CSS-анимации — дело нехитрое. Есть множество ресурсов , где их можно «достать» и использовать в своих целях. Копипаст еще никто не отменял. Однак о л учше самостоятельно разобраться , по каким принципам строится анимация при помощи CSS. В этом случа е в ы сможете самостоятельно разобрать скопированный пример «по косточкам» и адаптировать его под свой ресурс.

А второй момент — не весь код нужен в готов о й анимаци и . Иногда CSS-код настолько нагружен «хламом», что хорошая чистка ему не помешает. Вот тут знания основ анимации и пригодятся.

CSS3-анимация

CSS3-анимация применима практически для всех HTML-элементов, включая псевдоэлементы «:before» и «:after». Однак о н ужно помнить одну вещь — каждый анимационный элемент является дополнительной нагрузкой для браузера, поэтому не нужно превышать разумное количество анимации, чтобы ваш веб-сайт загружался быстро, а не зависал от обилия анимации.

Ключевое слово «@keyframes»

CSS3-анимация базируется на ключевом слове «@keyframes». Все , что написано за таким ключевым словом , и является CSS-кодом, определяющим поведение анимационного эффекта. Объявляется оно по такому шаблону:

@keyframes

список правил для анимации

>

Внутри списка анимационны х правил можно указать , какая анимация на каком этапе будет показываться. Каждый отдельный этап может включать множество свойств и значени й , определяющих анимацию.

Простой пример анимации CSS3. Допустим , у нас есть текстовый блок, которому мы хотим задать анимацию вида «пульсации» за счет изменения тени текста. Имя анимации «textShadow», тогда мы получим следующий CSS-код:

@keyframes textShadow

from

50%

to

>

Этапы включения определенного стиля анимации можно регламентировать словами «from. tо». Или регламентировать процентным соотношением «0%. 25%. 50%. 100%», где слову «from» соответствует «0%», слову «to» — « 100% » , а между ними может находит ь ся любое процентно е выражение. Для удобств а в примере выше мы показали комбинированный метод, что тоже можно применять.

Если с ключевым словом «@keyframes» записать несколько блоков анимации с одним и тем же именем, например «textShadow», тогда браузер вычислит только последний блок, а все остальные проигнорирует.

Для того чтобы анимация в блоке «@keyframes» сработала, ее нужно объявить в элементе, который мы хотим анимировать. То ест ь и мя анимаци и д олжно присутствовать в элементе. Для этого к элементу нужно применить свойство «animation», где будет имя анимации и несколько аргументов для нее.

В нашем случае это могло бы выглядеть так:

.animationText

font-size: 16px;

color: grey;

animation: textShadow 3s infinite ease-in-out;

>

Как видно , в свойстве «animation» мы объявили имя анимации, которое использовали в «@keyframes», продолжительность анимации 3 секунды, обозначили ее непрерывность аргументом «infinite» и указали функцию замедления аргументом «ease-in-out».

Свойство «animation»

• padding-top;
• padding-right;
• padding-bottom;
• padding-left.

Animation-name

Оно всегда стоит первым, потому что является самым главным. Без него анимация работать не будет, потому что благодаря имени анимации элементу определяется список анимационных свойств. Поэтому , если имя анимации в элементе и имя анимации после слова «@keyframe» не совпадают, тогда анимация не сработает.

Имя анимации чувствительно к регистру, поэтому «textShadow» и «textshadow» — это два разных имени. Рекомендуется применять название анимации, которое будет отражать суть анимации или суть элемента, к которому применяется анимация. В дальнейшем такой подход поможет идентифицировать и легче читать код.

Animation-duration

Это второй аргумент в свойстве «animation». Он определяет продолжительность анимационного цикла. Задать его можно в секундах ( s ) или в миллисекундах ( ms ) . Можно указать несколько значений продолжительности анимации через запятую, если у элемента будет несколько разных анимаций. То есть в одном свойстве можно указать продолжительность для разной анимации.

Animation-iteration-count

• infinite — показывает, что анимация будет проигрываться бесконечное количество раз;
• числовое значение — указываете любое число, которое будет определять количество циклов анимации.

Animation-timing-function

• ease — анимация медленно стартует, потом набирает разгон и замедляет ход к концу;
• ease-in — медленно стартует и набирает ход к концу;
• ease-out — быстро стартует и замедляет ход к концу;
• ease-in-out — медленно стартует и медленно заканчивается;
• cubic-bezier() — дает возможность устанавливать скорость воспроизведения анимации «вручную»;
• и др.

Animation-direction

В нашем примере не указан этот аргумент. Регламентирует направление воспроизведения анимации. То ест ь з десь можно указать, чтобы анимация воспроизводилась в обратном порядке. По умолчанию значение этого свойств а проигрывает анимацию в одном направлении. Если нужно обратное проигрывание, тогда указывается значение «reverse».

Animation-play-state

Это свойство у нас не указано. Оно определяет возможность временно приостановить анимацию до наступления какого-то события. Часто применяется совместно со скриптами JavaScript либо с состоянием «:hover», которое применяется для определения свойств при наведении курсора на элемент.

Значение для приостановки анимации — «paused». Важно отметить, что остановленная анимация начинает свое воспроизведение с того момента, на котором она остановилась, а не с самого начала.

Animation-delay

Это свойство регламентирует время задержки анимации перед ее началом. По умолчанию свойство определяет немедленный старт анимации. В качестве аргументов используется число, которое определяет время задержки в секундах ( s ) или миллисекундах ( ms ) .

Заключение

• в свойствах элемента, который вы хотите анимировать , обязательно нужно указать параметры «animation-name» и «animation-duration» — без них она не сработает;

Мы будем очень благодарны

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

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

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

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

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

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