Animation.css Preview

Easily apply stunning animations to your elements using Animate.css! Simply add the appropriate classes to your HTML elements and see the effects in action.

Add the following link inside the <head> tag of your HTML file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Core Classes (Required for Animations)

animate__animated → Always required to apply animations.
animate__infinite → Loops the animation infinitely.
animate__repeat-1, animate__repeat-2, animate__repeat-3 → Controls the number of animation repeats.
animate__delay-1s, animate__delay-2s, animate__delay-3s → Adds a delay before the animation starts.
animate__faster, animate__fast, animate__slow, animate__slower → Controls the animation speed.

This tool works perfectly on all devices, including smartphones and tablets—designed with mobile users in mind.