or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Animate.css

Animate.css is a comprehensive CSS animation library providing 97 ready-to-use, cross-browser CSS animations for web developers. It offers animation effects organized into categories like attention seekers, bouncing entrances/exits, fading effects, flippers, lightspeed animations, rotating effects, sliding movements, zooming transitions, and specials.

Package Information

  • Package Name: animate.css
  • Package Type: npm
  • Language: CSS
  • Installation: npm install animate.css
  • CDN: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

Core Imports

CSS Import

@import url('animate.css');

HTML Link

<link rel="stylesheet" href="node_modules/animate.css/animate.min.css">

Webpack/Bundler Import

import 'animate.css';

Basic Usage

<!-- V4.x Prefixed API (Recommended) -->
<div class="animate__animated animate__bounce">Bouncing element</div>

<!-- With utility classes -->
<div class="animate__animated animate__fadeIn animate__delay-2s animate__infinite">
  Infinite fading in with 2 second delay
</div>

<!-- Legacy API (Compatibility Mode) -->
<div class="animated bounce">Bouncing element</div>

CSS Custom Properties

.custom-animation {
  --animate-duration: 2s;
  --animate-delay: 0.5s;
  --animate-repeat: 3;
}

Architecture

Animate.css is built around several key components:

  • CSS Custom Properties: Global variables for duration, delay, and repeat configuration
  • Base Classes: Required .animate__animated class and legacy .animated class
  • Animation Classes: Individual animation effects organized by category
  • Utility Classes: Speed, delay, and repeat modifiers
  • Accessibility Support: Automatic prefers-reduced-motion media query support

Capabilities

CSS Custom Properties

Global CSS variables that control animation behavior across all animations.

:root {
  --animate-duration: 1s;  /* Default animation duration */
  --animate-delay: 1s;     /* Default animation delay */
  --animate-repeat: 1;     /* Default repeat count */
}

Base Classes

Required classes that must be applied along with animation classes.

/* V4.x Prefixed API (Recommended) */
.animate__animated { }

/* Legacy API (Compatibility Mode) */  
.animated { }

Utility Classes

Modifier classes for controlling animation timing and repetition.

/* Speed modifiers */
.animate__faster { }    /* 0.5x speed (duration / 2) */
.animate__fast { }      /* 0.8x speed */
.animate__slow { }      /* 2x speed */
.animate__slower { }    /* 3x speed */

/* Repeat modifiers */
.animate__infinite { }  /* Infinite iterations */
.animate__repeat-1 { }  /* Repeat 1x */
.animate__repeat-2 { }  /* Repeat 2x */
.animate__repeat-3 { }  /* Repeat 3x */

/* Delay modifiers */
.animate__delay-1s { }  /* 1 second delay */
.animate__delay-2s { }  /* 2 second delay */
.animate__delay-3s { }  /* 3 second delay */
.animate__delay-4s { }  /* 4 second delay */
.animate__delay-5s { }  /* 5 second delay */

Attention Seekers (13 animations)

Animation effects designed to draw attention to elements.

.animate__bounce { }      /* Bouncing effect with scale and vertical movement */
.animate__flash { }       /* Flashing opacity effect */
.animate__pulse { }       /* Simple scaling pulse */
.animate__rubberBand { }  /* Rubber band stretch effect */
.animate__shakeX { }      /* Horizontal X-axis shaking */
.animate__shakeY { }      /* Vertical Y-axis shaking */
.animate__headShake { }   /* Head shaking motion */
.animate__swing { }       /* Swinging pendulum motion */
.animate__tada { }        /* Celebratory tada effect with scale and rotation */
.animate__wobble { }      /* Wobbling side-to-side motion */
.animate__jello { }       /* Jello-like wobble with skew transforms */
.animate__heartBeat { }   /* Pulsing heartbeat effect */

Back Entrances (4 animations)

Entrance animations with scaling effects from different directions.

.animate__backInDown { }   /* Enter from above with scale transform */
.animate__backInLeft { }   /* Enter from left with scale transform */
.animate__backInRight { }  /* Enter from right with scale transform */
.animate__backInUp { }     /* Enter from below with scale transform */

Back Exits (4 animations)

Exit animations with scaling effects toward different directions.

.animate__backOutDown { }   /* Exit downward with scale transform */
.animate__backOutLeft { }   /* Exit left with scale transform */
.animate__backOutRight { }  /* Exit right with scale transform */
.animate__backOutUp { }     /* Exit upward with scale transform */

Bouncing Entrances (5 animations)

Bouncing entrance effects from various directions.

.animate__bounceIn { }      /* Scale-based bouncing entrance */
.animate__bounceInDown { }  /* Bounce in from above */
.animate__bounceInLeft { }  /* Bounce in from left */
.animate__bounceInRight { } /* Bounce in from right */
.animate__bounceInUp { }    /* Bounce in from below */

Bouncing Exits (5 animations)

Bouncing exit effects toward various directions.

.animate__bounceOut { }      /* Scale-based bouncing exit */
.animate__bounceOutDown { }  /* Bounce out downward */
.animate__bounceOutLeft { }  /* Bounce out left */
.animate__bounceOutRight { } /* Bounce out right */
.animate__bounceOutUp { }    /* Bounce out upward */

Fading Entrances (13 animations)

Fade-in effects from various directions and diagonals.

.animate__fadeIn { }              /* Simple fade in (opacity 0 to 1) */
.animate__fadeInDown { }          /* Fade in from above */
.animate__fadeInDownBig { }       /* Fade in from far above */
.animate__fadeInLeft { }          /* Fade in from left */
.animate__fadeInLeftBig { }       /* Fade in from far left */
.animate__fadeInRight { }         /* Fade in from right */
.animate__fadeInRightBig { }      /* Fade in from far right */
.animate__fadeInUp { }            /* Fade in from below */
.animate__fadeInUpBig { }         /* Fade in from far below */
.animate__fadeInTopLeft { }       /* Fade in from top-left diagonal */
.animate__fadeInTopRight { }      /* Fade in from top-right diagonal */
.animate__fadeInBottomLeft { }    /* Fade in from bottom-left diagonal */
.animate__fadeInBottomRight { }   /* Fade in from bottom-right diagonal */

Fading Exits (13 animations)

Fade-out effects toward various directions and diagonals.

.animate__fadeOut { }              /* Simple fade out (opacity 1 to 0) */
.animate__fadeOutDown { }          /* Fade out downward */
.animate__fadeOutDownBig { }       /* Fade out far downward */
.animate__fadeOutLeft { }          /* Fade out to left */
.animate__fadeOutLeftBig { }       /* Fade out far left */
.animate__fadeOutRight { }         /* Fade out to right */
.animate__fadeOutRightBig { }      /* Fade out far right */
.animate__fadeOutUp { }            /* Fade out upward */
.animate__fadeOutUpBig { }         /* Fade out far upward */
.animate__fadeOutTopLeft { }       /* Fade out to top-left diagonal */
.animate__fadeOutTopRight { }      /* Fade out to top-right diagonal */
.animate__fadeOutBottomLeft { }    /* Fade out to bottom-left diagonal */
.animate__fadeOutBottomRight { }   /* Fade out to bottom-right diagonal */

Flippers (5 animations)

3D flip animations with perspective transforms.

.animate__flip { }       /* 3D flip with perspective transform */
.animate__flipInX { }    /* Flip in along X-axis (horizontal flip) */
.animate__flipInY { }    /* Flip in along Y-axis (vertical flip) */
.animate__flipOutX { }   /* Flip out along X-axis */
.animate__flipOutY { }   /* Flip out along Y-axis */

Lightspeed (4 animations)

Fast entrance and exit animations with skew effects.

.animate__lightSpeedInRight { }   /* Fast entrance from right with skew */
.animate__lightSpeedInLeft { }    /* Fast entrance from left with skew */
.animate__lightSpeedOutRight { }  /* Fast exit to right with skew */
.animate__lightSpeedOutLeft { }   /* Fast exit to left with skew */

Rotating Entrances (5 animations)

Rotation-based entrance animations from various directions.

.animate__rotateIn { }             /* Simple rotation entrance (360deg) */
.animate__rotateInDownLeft { }     /* Rotate in from down-left */
.animate__rotateInDownRight { }    /* Rotate in from down-right */
.animate__rotateInUpLeft { }       /* Rotate in from up-left */
.animate__rotateInUpRight { }      /* Rotate in from up-right */

Rotating Exits (5 animations)

Rotation-based exit animations toward various directions.

.animate__rotateOut { }             /* Simple rotation exit (360deg) */
.animate__rotateOutDownLeft { }     /* Rotate out to down-left */
.animate__rotateOutDownRight { }    /* Rotate out to down-right */
.animate__rotateOutUpLeft { }       /* Rotate out to up-left */
.animate__rotateOutUpRight { }      /* Rotate out to up-right */

Sliding Entrances (4 animations)

Slide-in animations from different directions.

.animate__slideInDown { }   /* Slide in from above */
.animate__slideInLeft { }   /* Slide in from left */
.animate__slideInRight { }  /* Slide in from right */
.animate__slideInUp { }     /* Slide in from below */

Sliding Exits (4 animations)

Slide-out animations toward different directions.

.animate__slideOutDown { }   /* Slide out downward */
.animate__slideOutLeft { }   /* Slide out to left */
.animate__slideOutRight { }  /* Slide out to right */
.animate__slideOutUp { }     /* Slide out upward */

Specials (4 animations)

Unique, special-purpose animations with complex effects.

.animate__hinge { }         /* Door hinge effect with rotation and gravity fall (2x duration) */
.animate__jackInTheBox { }  /* Jack-in-the-box surprise pop effect */
.animate__rollIn { }        /* Rolling entrance with rotation and translation */
.animate__rollOut { }       /* Rolling exit with rotation and translation */

Zooming Entrances (5 animations)

Scale-based entrance animations from various directions.

.animate__zoomIn { }      /* Simple zoom in with scale transform */
.animate__zoomInDown { }  /* Zoom in from above */
.animate__zoomInLeft { }  /* Zoom in from left */
.animate__zoomInRight { } /* Zoom in from right */
.animate__zoomInUp { }    /* Zoom in from below */

Zooming Exits (5 animations)

Scale-based exit animations toward various directions.

.animate__zoomOut { }      /* Simple zoom out with scale transform */
.animate__zoomOutDown { }  /* Zoom out downward */
.animate__zoomOutLeft { }  /* Zoom out to left */
.animate__zoomOutRight { } /* Zoom out to right */
.animate__zoomOutUp { }    /* Zoom out upward */

Build Variants

Animate.css provides three different build variants:

  • animate.css - Standard unminified version (94KB)
  • animate.min.css - Minified version (71KB)
  • animate.compat.css - Compatibility version without prefixes (69KB)

Accessibility

Animate.css automatically supports the prefers-reduced-motion media query for users with motion sensitivity. When motion is reduced:

  • Animation duration is set to 1ms
  • Exit animations use opacity: 0 instead of complex transforms
  • No additional configuration required

Browser Support

  • Cross-browser compatibility with vendor prefixes
  • CSS custom properties support
  • Modern browser features with fallbacks
  • Responsive design considerations included

Legacy API Support

All animations are available in both prefixed (v4.x) and unprefixed (legacy) formats:

<!-- V4.x Prefixed (Recommended) -->
<div class="animate__animated animate__fadeIn">Content</div>

<!-- Legacy/Compatibility -->
<div class="animated fadeIn">Content</div>

Total API Surface

  • 97 Animation Classes (194 including both prefixed and unprefixed variants)
  • 13 Utility Classes (26 including both prefixed and unprefixed variants)
  • 1 Base Class (2 including both prefixed and unprefixed variants)
  • 3 CSS Custom Properties
  • 3 Build Variants