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

Question

[Soulism]

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

Comments

[Лёша Рубцов]

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

@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

[Юрий Лобанов]

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

Comments

[Soulism]

спасибо большое!

[SERIOUS100]

огромное спасибо))

Answer 2

[_ _]

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

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

Comments

[Soulism]

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

[Юрий Лобанов]

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

[Soulism]

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

[Юрий Лобанов]

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

[Soulism]

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

[Soulism]

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

[Юрий Лобанов]

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

Answer 3

[ultrbi4]

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

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

Comments

[Soulism]

Нет, это задержка перед анимацией)

[ultrbi4]

А если вставить в саму анимацию интервал задержки?