Как обнулить анимацию CSS после ее завершения, чтобы она проигралась еще раз так, будто страница обновилась?

Question

Soulism @Soulism

Как обнулить анимацию CSS после ее завершения, чтобы она проигралась еще раз так, будто страница обновилась?

У меня есть определенное количество разных зацикленных и единичных анимаций, сделанных при помощи CSS-овских keyframes и animation. Нужно, чтобы после определенного промежутка времени вся анимация на странице проигралась заново, независимо от того, единичная она или зацикленная. Так, будто страница обновилась, но без обновления страницы. Как можно это реализовать?

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

1 комментарий

Подписаться 3 Оценить 1 комментарий

Лёша Рубцов @Pinkierar

Я использую две одинаковые анимации с разным именем. Работает идеально

@keyframes anim0 {
    from { /*Свойство_1: Значение_1;*/ }
    to { /*Свойство_1: Значение_2;*/ }
}
@keyframes anim1 {
    from { /*Свойство_1: Значение_1;*/ }
    to { /*Свойство_1: Значение_2;*/ }
}

var flag = false;
elementB.onclick = function() {
	flag = !flag;
	if (flag)
		elementA.style.animationName = "anim0";
	else
		elementA.style.animationName = "anim1";
};

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

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

2 комментария

Пригласить эксперта

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

7 комментариев

Soulism @Soulism Автор вопроса

Простите пожалуйста, я в js не очень силен пока-что.
Не могли бы вы объяснить куда это вставить в код?
Я попробовал просто <скрипт>скрипт>, но не вышло.
Был бы благодарен за объяснения.
И тут "setTimeout(function( *просто число вставить?* )"

Написано более трёх лет назад
Юрий Лобанов @iiil

@Soulism а Вы погуглите три вопроса:
1. Как вставить jquery на сайт (вышеуказанный скрипт использует эту библиотеку)?
2. Как вставить скрипт jquery на сайт (скорее всего по этому запросу будет ответ и на первый вопрос)?
3. Как запустить скрипт jquery после загрузки документа?
И все, заодно научитесь.

Написано более трёх лет назад
Soulism @Soulism Автор вопроса

@iiil А, это jquery) Все, понял, спасибо)
target-element - тут что-то вставлять? или так и оставить?
и ф function только число вставить?

Написано более трёх лет назад
Юрий Лобанов @iiil

@Soulism #target-element — это селектор, на который навешана анимация (в данном случае id). Точнее, анимация должны быть навешана на class animation, который должен быть указан у элемента с id target-element. Но Вы вообще начали бы с ответа на вопрос автора ответа, как у Вас анимация-то прицеплена? )

Написано более трёх лет назад
Soulism @Soulism Автор вопроса

@iiil Ну, у меня есть, к примеру, див с классом .one
У него в файле CSS есть "animation: name 1s ease infinity;", к примеру
И ниже, соответственно, "@keyframes name{...}
И нужно, чтобы после определенного промежутка времени эта анимация как бы обнулилась (несмотря на infinity) и проигралась заново
Будто страница обновилась

Написано более трёх лет назад
Soulism @Soulism Автор вопроса

@iiil Ну вот так вот
Поможете?

Написано более трёх лет назад
Юрий Лобанов @iiil

@Soulism оформите пример анимации на codepen.io

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

2 комментария

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

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

Войти через центр авторизации

Похожие вопросы

PHP

+1 ещё

Простой
Почему клиент телеграма отсылает битый запрос?
- 1 подписчик
- 14 часов назад
- 73 просмотра
0

ответов
PHP

+2 ещё

Простой
Как в Drupal 10 массово проставить noindex для >1000 страниц?
- 1 подписчик
- 14 часов назад
- 29 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 19 часов назад
- 68 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 19 часов назад
- 87 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 107 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
PHP

+1 ещё

Простой
Парсинг XML yandex?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
PHP

Простой
Заполнить не существующими датами из бд в графике apexcharts?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Сделать мобильную версию сайта Next.js/React

19 апр. 2024, в 11:54

500 руб./в час

Реализовать Парсер сайта

19 апр. 2024, в 11:48

10000 руб./за проект

Собрать сайт на Vue / Laravel

19 апр. 2024, в 11:14

65000 руб./за проект

Я использую две одинаковые анимации с разным именем. Работает идеально

@keyframes anim0 { from { /*Свойство_1: Значение_1;*/ } to { /*Свойство_1: Значение_2;*/ } } @keyframes anim1 { from { /*Свойство_1: Значение_1;*/ } to { /*Свойство_1: Значение_2;*/ } }

var flag = false; elementB.onclick = function() { flag = !flag; if (flag) elementA.style.animationName = "anim0"; else elementA.style.animationName = "anim1"; };

Answer 1 · 2014-09-02 18:11:08

codepen.io/iiil/pen/aeugt
Вот пример, я просто заново вставляю этот элемент в родителя. Анимация плавная, но когда проходит 5 секунд — скачок, это как раз она обновляется.

Answer 2 · 2014-09-02 16:35:06

Зависит от того, куда у вас анимации прицеплены. Если к какому-то специфичному классу, то можно его убрать с элемента, после чего добавить снова, типа:

$('#target-element').removeClass('animation');
setTimeout(function(){ $('#target-element').addClass('animation'); }, 0);

Answer 3 · 2014-09-02 16:52:23

ultrbi4 @ultrbi4

Может это поможет

animation-delay: <time> [, ...];

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

2 комментария

Как обнулить анимацию CSS после ее завершения, чтобы она проигралась еще раз так, будто страница обновилась?

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

Минуточку внимания

Войдите на сайт