let element = document.querySelector("#example-1 .square")
await animateElement(element, "pulse")
#example-1 .animate-pule-active {
transition: ease-out 0.3s transform;
}
#example-1 .animate-pule {
transform: scale(0.5)
}
#example-1 .animate-pule-end {
transform: scale(1)
}
let element = document.querySelector("#example-1 .square")
await animateElement(element, "slide-right")
await animateElement(element, "slide-left")
#example-2 .square {
position: relative;
top: 0;
left: 0;
}
#example-2 .animate-slide-right, #example-2 .animate-slide-left {
transition: ease 0.3s left;
}
#example-2 .animate-slide-right, #example-2 .animate-slide-left-end {
left: -200%;
}
#example-2 .animate-slide-right-end, #example-2 .animate-slide-left {
left: 200%;
}
let elements = Array.from(document.querySelectorAll("#example-3 .card"))
elements.forEach(el => el.classList.remove("hidden"))
await animateStack("enter", elements)
await new Promise(res => setTimeout(res, 2000))
await animateStack("leave", elements)
elements.forEach(el => el.classList.add("hidden"))
await new Promise(res => setTimeout(res, 500))
#example-3 .animate-enter-active, #example-3 .animate-leave-active {
transition: ease-out 0.5s all;
}
#example-3 .animate-enter-step,
#example-3 .animate-leave-step {
transition-delay: 100ms;
}
#example-3 .animate-enter-step:last-child {
transition-delay: 150ms;
}
#example-3 .animate-enter {
transform: translateY(50px);
opacity: 0;
}
#example-3 .animate-leave-end {
opacity: 0;
}
#example-3 .hidden {
opacity: 0;
}