0
У меня есть этот элемент, который уже имеет анимацию, которая стреляет в какой-то момент:Как запустить новую анимацию css, когда элемент уже есть?
.box {
width: 100%;
height: 87.5%;
background: #DDD;
position: absolute;
top: 12.5%;
left: 0%;
-webkit-animation: load 0.5s ease-out 5s backwards;
animation: load 0.5s ease-out 5s backwards;
}
Но в то время, всегда после того, как анимация закончена, я хочу стрелять новую анимацию на том же элементе. Так я думал, что создание нового класса и присоединение его к элементу с JS будет работать:
.unload{
-webkit-animation: unload 0.5s ease-out 0.5s backwards !important;
animation: unload 0.5s ease-out 0.5s backwards !important;
}
document.querySelector(".box").classList.add('unload');
Но это не работает. Класс добавляется, но анимация не выполняется. Кто-нибудь знает, почему это происходит и как это исправить?
Поскольку все свойства анимации одинаковы, кроме имени, попробуйте установить 'анимация-имя' вместо всего свойства анимации – Lauromine
Прошу прощения, чтобы представить jQuery, но вы можете попробовать' $ .animate ({}, timeDelay, callbackFunction) '. И внутри функции callback func, вы можете снова оживить. – Rajesh
Другой альтернативой может быть добавление setTimeout при загрузке этого элемента, а затем добавить еще один класс второй анимации. Но не уверен, что это работает. Также я бы предложил использовать функцию анимации. – Rajesh