<div class="box"></div>
<button class="play">Play</button>
body {
font-family: system-ui;
background: #252323;
color: white;
align-items: center;
}
.box {
position: relative;
top: 25vh;
width: 50px;
height: 50px;
background-color: orange;
}
button {
position: relative;
top: 25vh;
}
import anime from "https://cdn.skypack.dev/animejs";
var animation = anime({
targets: '.box',
translateX: 250,
scale: 2,
backgroundColor: '#ff0000',
rotate: 360,
autoplay: false,
});
document.querySelector('.play').onclick=animation.play;
This Pen doesn't use any external CSS resources.