or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-animate-css

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

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/animate.css@4.1.x

To install, run

npx @tessl/cli install tessl/npm-animate-css@4.1.0

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

Version

Tile

Files

tessl/npm-animate-css

To install, run

index.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Animate.css

Package Information

Core Imports

CSS Import

HTML Link

Webpack/Bundler Import

Basic Usage

CSS Custom Properties

Architecture

Capabilities

CSS Custom Properties

Base Classes

Utility Classes

Attention Seekers (13 animations)

Back Entrances (4 animations)

Back Exits (4 animations)

Bouncing Entrances (5 animations)

Bouncing Exits (5 animations)

Fading Entrances (13 animations)

Fading Exits (13 animations)

Flippers (5 animations)

Lightspeed (4 animations)

Rotating Entrances (5 animations)

Rotating Exits (5 animations)

Sliding Entrances (4 animations)

Sliding Exits (4 animations)

Specials (4 animations)

Zooming Entrances (5 animations)

Zooming Exits (5 animations)

Build Variants

Accessibility

Browser Support

Legacy API Support

Total API Surface

index.mddocs/