What is CSS Animation?
CSS animations allow you to animate HTML elements without JavaScript. They consist of @keyframes rules that define the intermediate steps, and CSS properties that control timing, iteration, and direction.
Basic Example
This demo moves a square across the screen and fades it in.
@keyframes slideFade {
0% { transform: translateX(0); opacity: 0; }
100% { transform: translateX(200px); opacity: 1; }
}
.demo-box {
animation: slideFade 1.5s ease-out forwards;
}Triggering Animations with JavaScript
document.getElementById('runDemo').addEventListener('click', function(){
const box = document.getElementById('demoBox');
box.style.animation = 'none';
void box.offsetWidth; /* restart */
box.style.animation = 'slideFade 1.5s ease-out forwards';
});