Logo

Animation.css Preview

Convert upper case to lower case, lower case to upper case and more!

W3CoderSchool

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">
Copy
Copied

Add the class animate__infinite for an infinite loop

<h1 class="animated bounce">Example Text</h1>
Copy
Copied

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.

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.