Animation.css is a cool, fun, cross-browser default CSS3 animation library that you can easily reference in your projects.

  • The installation

    NPM install animate. CSS — Save or yarn add animate. CSS or download it directly

  • use

    Reference in the project

    <head>
  <link rel="stylesheet" href="animate.min.css">
</head>
或者
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>Copy the code

  • Use rules

    Animation.css provides a variety of animation effects (e.g., infinite) as well as support for custom styles (e.g., yourElement).

    <h1 class="animated infinite yourElement">Example</h1>Copy the code

    Animation.css supports the following types of animations:
Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

  • Support delay effect (delay effect delay execution) and speed effect (speed effect execution time)

    Class Name Delay Time
    delay-2s 2s
    delay-3s 3s
    delay-4s 4s
    delay-5s 5s
    Class Name Speed Time
    slow 2s
    slower 3s
    fast 800ms
    faster 500ms

If you want to set additional delay and acceleration effects, do so in your own code.

Example:

  • attention seekers

    1. Bounce bounce:

      <h1 class="animated bounce delay-2s"> test animation css</h1>Copy the code

    2. Flash flash:

      <h1 class="animated flash delay-2s"> test animation css</h1>Copy the code

    3. Pulse:

      <h1 class="animated pulse delay-2s"> test animation css</h1>Copy the code

    4. RubberBand:

      <h1 class="animated rubberBand delay-2s"> test animation css</h1>Copy the code

    5. Shake shake:

      <h1 class="animated shake delay-2s"> test animation css</h1>Copy the code

    6. Swing swing:

      <h1 class="animated swing delay-2s"> test animation css</h1>Copy the code

    7. Tada:

      <h1 class="animated tada delay-2s"> test animation css</h1>Copy the code

    8. Wobble sloshing:

      <h1 class="animated wobble delay-2s"> test animation css</h1>Copy the code

    9. Jello jelly:

      <h1 class="animated jello delay-2s"> test animation css</h1>Copy the code

  • Bouncing entrances on

    1. BounceIn bounces into (from left) :

      <h1 class="animated bounceIn delay-2s"> test animation css</h1>Copy the code

    2. BounceInDown bounceInDown to enter from above:

      <h1 class="animated bounceInDown delay-2s"> test animation css</h1>Copy the code

    3. BounceInLeft bounces into from the left:

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>Copy the code

    4. BounceInRight bounces into from the right:

      <h1 class="animated bounceInRight delay-2s"> test animation css</h1>Copy the code

    5. BounceInUp bounces from below to enter:

      <h1 class="animated bounceInUp delay-2s"> test animation css</h1>Copy the code

  • Bouncing exits exits

    1. BounceOut to bounceOut:

      <h1 class="animated bounceOut delay-2s"> test animation css</h1>Copy the code

    2. BounceOutDown bounceOutDown to exit from under:

      <h1 class="animated bounceOutDown delay-2s"> test animation css</h1>Copy the code

    3. BounceOutLeft bounceOutLeft bounceout from left:

      <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>Copy the code

    4. BounceOutRight Bounce exit from right:

      <h1 class="animated bounceOutRight delay-2s"> test animation css</h1>Copy the code

    5. BounceOutUp bounceOutUp to bounce off:

      <h1 class="animated bounceOutUp delay-2s"> test animation css</h1>Copy the code

  • Fading entrances enter

    1. FadeIn fade in:

      <h1 class="animated fadeIn delay-2s"> test animation css</h1>Copy the code

    2. FadeInDown fades in from top down:

      <h1 class="animated fadeInDown delay-2s"> test animation css</h1>Copy the code

    3. FadeInDownBig To fade from top to bottom:

      <h1 class="animated fadeInDownBig delay-2s"> test animation css</h1>Copy the code

    4. FadeInLegt fades in from left to right:

      <h1 class="animated fadeInLegt delay-2s"> test animation css</h1>Copy the code

    5. FadeInLegtBig fades in from left to right:

      <h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1>Copy the code

    6. FadeInRight fades in from right to left:

      <h1 class="animated fadeInRight delay-2s"> test animation css</h1>Copy the code

    7. FadeInRightBig fades in from right to left:

      <h1 class="animated fadeInRightBig delay-2s"> test animation css</h1>Copy the code

    8. FadeInUp fades in from bottom up:

      <h1 class="animated fadeInUp delay-2s"> test animation css</h1>Copy the code

    9. FadeInUpBig fades from bottom up:

      <h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>Copy the code

  • Fading exits

    1. FadeOut out:

      <h1 class="animated fadeOut delay-2s"> test animation css</h1>Copy the code

    2. FadeOutDown fadeout from the top down:

      <h1 class="animated fadeOutDown delay-2s"> test animation css</h1>Copy the code

    3. FadeOutDownBig To fade out from above:

      <h1 class="animated fadeOutDownBig delay-2s"> test animation css</h1>Copy the code

    4. FadeOutLegt fades out from right to left:

      <h1 class="animated fadeOutLegt delay-2s"> test animation css</h1>Copy the code

    5. FadeOutLeftBig fades out from right to left:

      <h1 class="animated fadeOutLeftBig delay-2s"> test animation css</h1>Copy the code

    6. FadeOutRight fades out from left to right:

      <h1 class="animated fadeOutRight delay-2s"> test animation css</h1>Copy the code

    7. FadeOutRightBig fade out from left to right:

      <h1 class="animated fadeOutRightBig delay-2s"> test animation css</h1>Copy the code

    8. FadeOutUp fadeout from bottom up:

      <h1 class="animated fadeOutUp delay-2s"> test animation css</h1>Copy the code

    9. FadeOutUpBig Fades out from bottom up:

      <h1 class="animated fadeOutUpBig delay-2s"> test animation css</h1>Copy the code

  • Flipper’s sudden effect

    1. Flip flip flip

      <h1 class="animated flip delay-2s"> test animation css</h1>Copy the code

    2. FlipInX reverses into the X-axis

      <h1 class="animated flipInX delay-2s"> test animation css</h1>Copy the code

    3. FlipInY reverses into the Y-axis

      <h1 class="animated flipInY delay-2s"> test animation css</h1>Copy the code

    4. FlipOutX reverses exit on the X-axis

      <h1 class="animated flipOutX delay-2s"> test animation css</h1>Copy the code

    5. FlipOutY reverses and exits on the y axis

      <h1 class="animated flipOutY delay-2s"> test animation css</h1>Copy the code

  • Light Speed is very fast

    1. LightSpeedIn is very fast to enter

      <h1 class="animated lightSpeedIn delay-2s"> test animation css</h1>Copy the code

    2. LightSpeedOut is very fast to enter

      <h1 class="animated lightSpeedOut delay-2s"> test animation css</h1>Copy the code

  • Rotating entrances enter

    1. RotateIn rotates in

      <h1 class="animated rotateIn delay-2s"> test animation css</h1>Copy the code

    2. RotateInDownLeft rotates to drop from the left

      <h1 class="animated rotateInDownLeft delay-2s"> test animation css</h1>Copy the code

    3. Rotateinbody spins down from the right

      <h1 class="animated rotateInDownRight delay-2s"> test animation css</h1>Copy the code

    4. The rotateInUpLeft rotation rises from the left

      <h1 class="animated rotateInUpLeft delay-2s"> test animation css</h1>Copy the code

    5. RotateInUpRight rising from the right

      <h1 class="animated rotateInUpRight delay-2s"> test animation css</h1>Copy the code

  • Rotating exits

    1. RotateOut rotates to exit

      <h1 class="animated rotateOut delay-2s"> test animation css</h1>Copy the code

    2. RotateOutDownLeft rotation drops from left to exit

      <h1 class="animated rotateOutDownLeft delay-2s"> test animation css</h1>Copy the code

    3. Rotateoutbody rotation drops from the right to exit

      <h1 class="animated rotateOutDownRight delay-2s"> test animation css</h1>Copy the code

    4. The rotateOutUpLeft rotation rises from the left to exit

      <h1 class="animated rotateOutUpLeft delay-2s"> test animation css</h1>Copy the code

    5. The rotateOutUpRight rotation rises from the right to exit

      <h1 class="animated rotateOutUpRight delay-2s"> test animation css</h1>Copy the code

  • Sliding entrances slides in

    1. SlideInUp goes up and slides in

      <h1 class="animated slideInUp delay-2s"> test animation css</h1>Copy the code

    2. SlideInDown slide into

      <h1 class="animated slideInDown delay-2s"> test animation css</h1>Copy the code

    3. SlideInRight slides in from the right

      <h1 class="animated slideInRight delay-2s"> test animation css</h1>Copy the code

    4. SlideInLeft slides in from the left

      <h1 class="animated slideInLeft delay-2s"> test animation css</h1>Copy the code

  • Sliding exits

    1. SlideOutUp goes up and slides out

      <h1 class="animated slideOutUp delay-2s"> test animation css</h1>Copy the code

    2. SlideOutDown slides down to exit

      <h1 class="animated slideOutDown delay-2s"> test animation css</h1>Copy the code

    3. Slide out from the right

      <h1 class="animated slideOutRight delay-2s"> test animation css</h1>Copy the code

    4. SlideOutLeft slides out from the left

      <h1 class="animated slideOutLeft delay-2s"> test animation css</h1>Copy the code

  • Zoom entrances Enter in the Z direction

    1. ZoomIn entering z-axis

      <h1 class="animated zoomIn delay-2s"> test animation css</h1>Copy the code

    2. ZoomInDown is descending in z direction

      <h1 class="animated zoomInDown delay-2s"> test animation css</h1>Copy the code

    3. ZoomInLeft is entering from the left z-axis

      <h1 class="animated zoomInLeft delay-2s"> test animation css</h1>Copy the code

    4. ZoomInRight is entering from the right z-axis

      <h1 class="animated zoomInRight delay-2s"> test animation css</h1>Copy the code

  • The zoom exits in the direction of the z axis

    1. ZoomOut exits in the Z direction

      <h1 class="animated zoomOut delay-2s"> test animation css</h1>Copy the code

    2. ZoomOutDown zoomOutDown exits from the Z-axis

      <h1 class="animated zoomOutDown delay-2s"> test animation css</h1>Copy the code

    3. ZoomOutLeft Exits the z axis from the left

      <h1 class="animated zoomOutLeft delay-2s"> test animation css</h1>Copy the code

    4. ZoomOutRight exits from the right in the Z direction

      <h1 class="animated zoomOutRight delay-2s"> test animation css</h1>Copy the code

  • Special special

    1. Hinge hinge effect

      <h1 class="animated hinge delay-2s"> test animation css</h1>Copy the code

    2. jackInTheBox

      <h1 class="animated jackInTheBox delay-2s"> test animation css</h1>Copy the code

    3. RollIn rolls in

      <h1 class="animated rollIn delay-2s"> test animation css</h1>Copy the code

    4. RollOut Exits by rolling

      <h1 class="animated rollOut delay-2s"> test animation css</h1>Copy the code