Как сделать чтобы анимация не повторялась css
Перейти к содержимому

Как сделать чтобы анимация не повторялась css

  • автор:

Свойство animation-iteration-count

По умолчанию анимация на веб-странице проигрывается один раз, после чего останавливается. К счастью, в CSS имеется инструмент, с помощью которого можно управлять количеством повторений анимации. Свойство называется animation-iteration-count и принимает следующие значения:

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

Свойство записывается рядом с другими стилями анимируемого элемента:

.traffic-light

Как и всегда, при работе со свойствами, которые относятся к анимации CSS3, обязательно использование префиксов производителей, таких как -webkit- , -o- , -moz- .

Далее в учебнике: свойство animation-direction для изменения направления анимации.

Свойство 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 , представляющие собой анимацию по наведению на элемент

Свойство animation-direction

Свойство animation-direction задает направление анимации. По умолчанию анимация повторится только 1 раз и затем вернется в исходное состояние, затем, если задана задержка animation-delay , будет ждать заданное время и потом цикл начнется сначала.

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

Также можно задать такое поведение: анимация дойдет до крайней точки и вернется обратно (как в transition ). Смотрите описание ниже.

Синтаксис

Значения

Значение Описание
reverse Анимация будет проигрываться в обратном направлении.
alternate Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition).
alternate-reverse Анимация будет проигрываться из конечного положения в начальное и обратно. По сути это значения alternate и reverse в одном флаконе.
normal Анимация будет проигрываться от начала к концу, а после окончания скачком перескакивать в начальное положение.

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

Пример

Сейчас элемент будет двигаться в одну сторону, а потом возвращаться обратно, так как задано значение alternate . При этом animation-duration имеет значение 3 секунды и это значит, что перемещения «туда» и «обратно» будут длиться по 3 секунды:

@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; >

Пример

Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):

@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; >

Пример

Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):

@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

Как сделать, чтобы бесконечно вертелся блок? Сейчас такое вращение только при наведении указателя мыши.

Отслеживать
8,592 4 4 золотых знака 29 29 серебряных знаков 53 53 бронзовых знака
задан 15 янв 2018 в 15:57
2,171 4 4 золотых знака 20 20 серебряных знаков 38 38 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

div < background: red; width: 100px; height: 100px; transition: all 0.5s ease; animation: rotate 1s linear infinite; >@keyframes rotate < from < transform: rotate(360deg); >>

Отслеживать
ответ дан 15 янв 2018 в 20:01
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знак

Используйте @keyframes и animation: . infinite . .

div < height: 150px; width: 150px; background: #ddd; transition: all 0.5s ease; transform: rotate(0deg) >div:hover < animation: move 0.5s infinite linear; >@keyframes move < 0% < transform: rotate(0deg); background: green; >50% < transform: rotate(180deg); border-radius: 50%; >100% < transform: rotate(360deg); background: yellow; >>

Отслеживать
ответ дан 15 янв 2018 в 16:02
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков

   Infinite rotating @keyframes infinite-auto-rotating < from < -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); >to < -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); >> @-webkit-keyframes infinite-auto-rotating /* Для Safari и Chrome */ < from < -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); >to < -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); >> div 

Отслеживать
ответ дан 15 янв 2018 в 19:30
Tigran Yengoyan Tigran Yengoyan
11 3 3 бронзовых знака

  • css
  • анимация
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

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

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