CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-animate-css

A cross-browser library of CSS animations with ready-to-use, class-based animations for web developers.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/animate.css@4.1.x
Publish Source
CLI
Badge
tessl/npm-animate-css badge