CSS Animations
Hover, scroll, click, mousemove animations, easy usage, good perfomance.
npm install animated-css pnpm install animated-css yarn add animated-css Astro example
---
import 'animated-css/src/animations/slideIn.css'
---
<h1 data-acss="viewport slideIn 1s">Animated CSS</h1>
<script>
import init from 'animated-css'
init()
</script>
Hover Animations
It executes when the element is hovered
Blink
import 'animated-css/src/animations/blink.css' data-acss='blink hover 1s' Shake
import 'animated-css/src/animations/shake.css' data-acss='shake hover 1s' Bounce
import 'animated-css/src/animations/bounce.css' data-acss='bounce hover 1s' Diagonal shake
import 'animated-css/src/animations/diagonalShake.css' data-acss='diagonalShake hover 1s' Fast vertical shake
import 'animated-css/src/animations/fastVerticalShake.css' data-acss='fastVerticalShake hover 1s' Flip horizontal
import 'animated-css/src/animations/flipHorizontal.css' data-acss='flipHorizontal hover 1s' Horizontal shake
import 'animated-css/src/animations/horizontalShake.css' data-acss='horizontalShake hover 1s' Opacity and scale
import 'animated-css/src/animations/opacityAndScale.css' data-acss='opacityAndScale hover 1s' Oscillate
import 'animated-css/src/animations/oscillate.css' data-acss='oscillate hover 1s' Pendulum
import 'animated-css/src/animations/pendulum.css' data-acss='pendulum hover 1s' Size and opacity change
import 'animated-css/src/animations/sizeAndOpacityChange.css' data-acss='sizeAndOpacityChange hover 1s' Size change
import 'animated-css/src/animations/sizeChange.css' data-acss='sizeChange hover 1s' Stretch
import 'animated-css/src/animations/stretch.css' data-acss='stretch hover 1s' Vertical bounce
import 'animated-css/src/animations/verticalBounce.css' data-acss='verticalBounce hover 1s' Vertical shake
import 'animated-css/src/animations/verticalShake.css' data-acss='verticalShake hover 1s' Zigzag slide
import 'animated-css/src/animations/zigzagSlide.css' data-acss='blink hover 1s' Move
import 'animated-css/src/animations/move.css' data-acss='blink hover 1s' Viewport Animations
It executes when the element is in the viewport
Slide In
import 'animated-css/src/animations/slideIn.css' data-acss='viewport repeat slideIn 1s' Fade In
import 'animated-css/src/animations/fadeIn.css' data-acss='viewport repeat fadeIn 1s' Appear and rotate
import 'animated-css/src/animations/appearAndRotate.css' data-acss='viewport repeat appearAndRotate 1s' Blur in out
import 'animated-css/src/animations/blurInOut.css' data-acss='viewport repeat blurInOut 1s' Crescendo
import 'animated-css/src/animations/crescendo.css' data-acss='viewport repeat crescendo 1s' Diagonal slide
import 'animated-css/src/animations/diagonalSlide.css' data-acss='viewport repeat diagonalSlide 1s' Diagonal slide and opacity
import 'animated-css/src/animations/diagonalSlideAndOpacity.css' data-acss='viewport repeat diagonalSlideAndOpacity 1s' Diagonal slide and rotate
import 'animated-css/src/animations/diagonalSlideAndRotate.css' data-acss='viewport repeat diagonalSlideAndRotate 1s' Fade and diagonal move
import 'animated-css/src/animations/fadeAndDiagonalMove.css' data-acss='viewport repeat fadeAndDiagonalMove 1s' Fade and enlarge
import 'animated-css/src/animations/fadeAndEnlarge.css' data-acss='viewport repeat fadeAndEnlarge 1s' Fade and rotate
import 'animated-css/src/animations/fadeAndRotate.css' data-acss='viewport repeat fadeAndRotate 1s' Fade and scale
import 'animated-css/src/animations/fadeAndScale.css' data-acss='viewport repeat fadeAndScale 1s' Fade and slide
import 'animated-css/src/animations/fadeAndSlide.css' data-acss='viewport repeat fadeAndSlide 1s' Fade and spin
import 'animated-css/src/animations/fadeAndSpin.css' data-acss='viewport repeat fadeAndSpin 1s' Horizontal shake and fade
import 'animated-css/src/animations/horizontalShakeAndFade.css' data-acss='viewport repeat horizontalShakeAndFade 1s' Horizontal slide
import 'animated-css/src/animations/horizontalSlide.css' data-acss='viewport repeat horizontalSlide 1s' Rotate 3D
import 'animated-css/src/animations/rotate3D.css' data-acss='viewport repeat rotate3D 1s' Scale and fade
import 'animated-css/src/animations/scaleAndFade.css' data-acss='viewport repeat scaleAndFade 1s' Scale and rotate
import 'animated-css/src/animations/scaleAndRotate.css' data-acss='viewport repeat scaleAndRotate 1s' Scale up
import 'animated-css/src/animations/scaleUp.css' data-acss='viewport repeat scaleUp 1s' Slide and fade
import 'animated-css/src/animations/slideAndFade.css' data-acss='viewport repeat slideAndFade 1s' Slide down
import 'animated-css/src/animations/slideDown.css' data-acss='viewport repeat slideDown 1s' Zoom fade
import 'animated-css/src/animations/zoomFade.css' data-acss='viewport repeat zoomFade 1s' Zoom in
import 'animated-css/src/animations/zoomIn.css' data-acss='viewport repeat zoomIn 1s' Mousemove Animations
It executes when the element is hovered and is in movement
Parallax effect
import 'animated-css/src/animations/parallax.css' data-acss='mousemove hover parallax 1s' Forever Animations
It executes forever
Floating
import 'animated-css/src/animations/floating.css' data-acss='floating forever 1s' Other Animations
It executes in other situations
Fade out
import 'animated-css/src/animations/fadeOut.css' data-acss='viewport repeat fadeOut 1s' Alternate scale
import 'animated-css/src/animations/alternateScale.css' data-acss='viewport repeat alternateScale 1s' Decrescendo
import 'animated-css/src/animations/decrescendo.css' data-acss='viewport repeat decrescendo 1s' Fade out
import 'animated-css/src/animations/fadeOut.css' data-acss='viewport repeat fadeOut 1s' Scale down
import 'animated-css/src/animations/scaleDown.css' data-acss='viewport repeat scaleDown 1s' Zoom out
import 'animated-css/src/animations/zoomOut.css' data-acss='viewport repeat zoomOut 1s' Diagonal rotate
import 'animated-css/src/animations/diagonalRotate.css' data-acss='viewport repeat diagonalRotate 1s' Fast blink
import 'animated-css/src/animations/fastBlink.css' data-acss='viewport repeat fastBlink 1s' Fade half
import 'animated-css/src/animations/fadeHalf.css' data-acss='viewport repeat fadeHalf 1s' Fast random blink
import 'animated-css/src/animations/fastRandomBlink.css' data-acss='viewport repeat fastRandomBlink 1s' Opacity and rotate
import 'animated-css/src/animations/opacityAndRotate.css' data-acss='viewport repeat opacityAndRotate 1s' Position change
import 'animated-css/src/animations/positionChange.css' data-acss='viewport repeat positionChange 1s' Random blink
import 'animated-css/src/animations/randomBlink.css' data-acss='viewport repeat randomBlink 1s' Rotate
import 'animated-css/src/animations/rotate.css' data-acss='viewport repeat rotate 1s' Rotate and fade
import 'animated-css/src/animations/rotateAndFade.css' data-acss='viewport repeat rotateAndFade 1s' Rotate and opacity
import 'animated-css/src/animations/rotateAndOpacity.css' data-acss='viewport repeat rotateAndOpacity 1s' Rotate and scale
import 'animated-css/src/animations/rotateAndScale.css' data-acss='viewport repeat rotateAndScale 1s' Rotate left
import 'animated-css/src/animations/rotateLeft.css' data-acss='viewport repeat rotateLeft 1s' Rotate right
import 'animated-css/src/animations/rotateRight.css' data-acss='viewport repeat rotateRight 1s' Size change
import 'animated-css/src/animations/sizeChange.css' data-acss='viewport repeat sizeChange 1s' Sway
import 'animated-css/src/animations/sway.css' data-acss='viewport repeat sway 1s' Slide out
import 'animated-css/src/animations/slideOut.css' data-acss='viewport repeat slideOut 1s' Side bounce
import 'animated-css/src/animations/sideBounce.css' data-acss='viewport repeat sideBounce 1s' Size and rotate
import 'animated-css/src/animations/sizeAndRotate.css' data-acss='viewport repeat sizeAndRotate 1s'