<div class="square-group" xyz="tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-100% right-5">
<div class="square xyz-in"></div>
<div class="square xyz-in"></div>
<div class="square xyz-in"></div>
</div>body {
background: #171c33;
margin: 0;
}
.square-group {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
height: 100vh;
}
.square {
background: #57cbf2;
width: 8vw;
height: 8vw;
}
const squares = document.querySelectorAll(".square");
setInterval(() => {
squares.forEach((square) => {
square.classList.toggle("xyz-in");
square.classList.toggle("xyz-out");
});
}, 1200);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.