Красивые анимации состояний с помощью 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
Анимация проигрывает 1 раз, доходит до 100% и опять на ноль, и блок уходит, потому что top:-625px; Как сделать, чтобы анимация остановилась на 100%?
Отслеживать
2,548 1 1 золотой знак 14 14 серебряных знаков 31 31 бронзовый знак
задан 8 янв 2013 в 21:11
99 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
@keyframes blocks-main < 0%< top: -625px; >40% < top: -625px; >70% < top: -625px; >100% < top: 0; >> div
в конец добавь: forwards
Отслеживать
ответ дан 18 окт 2016 в 13:47
user207693 user207693
blocks-main-visible; В обработчик клика:
this.className='ваш_класс_с_анимацией blocks-main-visible' Возможно есть еще способы.
Отслеживать
ответ дан 9 янв 2013 в 1:11
3,270 12 12 серебряных знаков 18 18 бронзовых знаков
-webkit-animation-fill-mode:both; animation-fill-mode:both; Отслеживать
122k 24 24 золотых знака 125 125 серебряных знаков 299 299 бронзовых знаков
ответ дан 3 июн 2015 в 0:45
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как воспроизвести и остановить CSS-анимацию с помощью jQuery
Вы можете использовать jQuery-метод css() в сочетании со свойством animation-play-state для воспроизведения и остановки анимации CSS в середине цикла.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
jQuery Play and Stop CSS Animation Предупреждение: CSS-анимация не работает в Internet Explorer 9 и более ранних версиях.
Читайте также
Похожие примеры:
- Как анимировать непрозрачность элемента при наведении курсора мыши с помощью jQuery
- Как динамически добавлять CSS-свойства к элементу с помощью jQuery
- Как добавить атрибуты к элементу HTML в jQuery
Свойство 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 , представляющие собой анимацию по наведению на элемент