.side {
margin: 150px auto;
width: 400px;
height: 200px;
animation: rotate 10s infinite linear;
transform-origin: 50% 50%;
}
@keyframes rotate {
100% {
transform: rotateY(-360deg);
}
}
@keyframes rotate2 {
100% {
transform: rotateY(360deg);
}
}
1 ответ
Через Element.style.animationName
.
document.querySelector('button').onclick = function() {
document.querySelector('.side').style.animationName = "rotate2";
}
.side {
margin: 50px auto;
width: 400px;
height: 200px;
background-color: #ccc;
animation: rotate 10s infinite linear;
transform-origin: 50% 50%;
}
@keyframes rotate {
100% {
transform: rotateY(-360deg);
}
}
@keyframes rotate2 {
100% {
transform: rotateY(360deg);
}
}
<div class="side"></div>
<button>change animation</button>
object.style.animation = "rotate2 10s infinite linear";
Но, с заменой класса, думаю действительно лучше.