Toggle Dark Mode
cssanimation.io Preview
Click an animation class to preview. Click 📋 to copy.
cssanimation
Blur Effects
ca__fx-blurIn
📋
ca__fx-blurInfromLeft
📋
ca__fx-blurInFromRight
📋
ca__fx-blurInFromTop
📋
ca__fx-blurInFromBottom
📋
ca__fx-blurOut
📋
ca__fx-blurOutToLeft
📋
ca__fx-blurOutToRight
📋
ca__fx-blurOutToTop
📋
ca__fx-blurOutToBottom
📋
Bounce Animations
ca__fx-bounceX
📋
ca__fx-bounceY
📋
ca__fx-bounceZoomOut
📋
ca__fx-spring
📋
ca__fx-boing
📋
ca__fx-hop
📋
ca__fx-lift
📋
ca__fx-popUp
📋
ca__fx-rebound
📋
ca__fx-jump
📋
ca__fx-launch
📋
ca__fx-jitterJump
📋
ca__fx-jumping
📋
ca__fx-elasticJump
📋
ca__fx-squishyBounce
📋
ca__fx-bouncyDrop
📋
ca__fx-levitate
📋
Bounce In
ca__fx-bounceInTop
📋
ca__fx-bounceInFromBottom
📋
ca__fx-bounceFromTop
📋
ca__fx-bounceFromDown
📋
ca__fx-bounceInBottom
📋
ca__fx-bounceInLeft
📋
ca__fx-bounceInRight
📋
Bounce Out
ca__fx-bounceOutTop
📋
ca__fx-bounceOutBottom
📋
ca__fx-bounceOutLeft
📋
ca__fx-bounceOutRight
📋
Blob Animation
ca__fx-blobJumpMorph
📋
ca__fx-gooBounceBlob
📋
ca__fx-jellyBounceWave
📋
ca__fx-blobBouncePop
📋
ca__fx-blobElasticStretch
📋
ca__fx-blobPulseDrop
📋
ca__fx-floatingOrb
📋
ca__fx-magicBlobSplit
📋
ca__fx-orbitalSpin
📋
ca__fx-pulseAura
📋
ca__fx-magicTrailComet
📋
Clip-Path
ca__fx-clipCircleExpandIn
📋
ca__fx-clipCircleCollapseOut
📋
ca__fx-clipDiagonalWipeIn
📋
ca__fx-clipDiagonalWipeOut
📋
ca__fx-clipGridReveal
📋
ca__fx-clipGridCollapse
📋
ca__fx-clipVerticalSplitIn
📋
ca__fx-clipVerticalSplitOut
📋
ca__fx-clipCrossSweepOut
📋
ca__fx-clipBurstCircle
📋
ca__fx-clipBurstCollapse
📋
ca__fx-clipDiamondIn
📋
ca__fx-clipDiagonalSliceIn
📋
ca__fx-clipMultiStepReveal
📋
ca__fx-clipMultiStepCollapse
📋
ca__fx-clipAnimate
📋
ca__fx-clipAnimateWave
📋
Dramatic
ca__fx-curtainReveal
📋
ca__fx-curtainClose
📋
ca__fx-spiralTwistIn
📋
ca__fx-spiralTwistOut
📋
ca__fx-spotlightFocus
📋
ca__fx-spotlightFade
📋
Elastic
ca__fx-elasticArise
📋
ca__fx-elasticRise
📋
ca__fx-elasticStretch
📋
ca__fx-elasticBounce
📋
ca__fx-elasticSquash
📋
ca__fx-elasticIn
📋
ca__fx-rubberPop
📋
ca__fx-squishLift
📋
ca__fx-flubberBounce
📋
ca__fx-springyEffect
📋
ca__fx-jiggleTransform
📋
ca__fx-stretchCollapse
📋
ca__fx-reboundMotion
📋
ca__fx-snapBackEase
📋
ca__fx-flexiShrink
📋
ca__fx-bouncyScale
📋
ca__fx-pulseElastic
📋
ca__fx-squishBoing
📋
ca__fx-rubber
📋
ca__fx-boingScale
📋
ca__fx-slinkyDrop
📋
ca__fx-rubberExpand
📋
ca__fx-rubberShrink
📋
ca__fx-MatrixWave
📋
ca__fx-matrixWave
📋
Engagement
ca__fx-bobble
📋
ca__fx-jelly
📋
ca__fx-perspectiveTilt
📋
ca__fx-jello
📋
ca__fx-waveBand
📋
Dance & Skew
ca__fx-danceTop
📋
ca__fx-danceMiddle
📋
ca__fx-danceBottom
📋
ca__fx-skewLeft
📋
ca__fx-skewRight
📋
ca__fx-skewInLeft
📋
ca__fx-skewInRight
📋
ca__fx-skewOutLeft
📋
ca__fx-skewOutRight
📋
Door & Perspective
ca__fx-doorCloseFromLeft
📋
ca__fx-doorOpenFromRight
📋
ca__fx-doorCloseFromRight
📋
ca__fx-doorOpenFromLeft
📋
ca__fx-perspectiveToTop
📋
ca__fx-perspectiveToBottom
📋
Elevate & Hang
ca__fx-elevateLeft
📋
ca__fx-elevateRight
📋
ca__fx-hangAndDropLeft
📋
ca__fx-hangAndDropRight
📋
ca__fx-hangOnLeft
📋
ca__fx-hangOnRight
📋
Fade Content
ca__fx-fadeIn
📋
ca__fx-fadeInLeft
📋
ca__fx-fadeInRight
📋
ca__fx-fadeInTop
📋
ca__fx-fadeInBottom
📋
ca__fx-fadeOut
📋
ca__fx-fadeOutLeft
📋
ca__fx-fadeOutRight
📋
ca__fx-fadeOutTop
📋
ca__fx-fadeOutBottom
📋
ca__fx-tiltFadeBack
📋
Flip Effects
ca__fx-flipX
📋
ca__fx-flipXZoomIn
📋
ca__fx-flipXZoomOut
📋
ca__fx-flipOutLeft
📋
ca__fx-flipOutRight
📋
ca__fx-flipOutXLeft
📋
ca__fx-flipOutXRight
📋
ca__fx-flipY
📋
ca__fx-flipYZoomIn
📋
ca__fx-flipYZoomOut
📋
Flip Twist
ca__fx-flipTwistRight
📋
ca__fx-flipTwistLeft
📋
ca__fx-flipTwistTop
📋
ca__fx-flipTwistBottom
📋
ca__fx-flipTwistPop
📋
ca__fx-flipTwistCombo
📋
ca__fx-flipTwistVertical
📋
ca__fx-flipTwistDiagonal
📋
ca__fx-flipTwistSlam
📋
ca__fx-flipTwistZoom
📋
ca__fx-flipTwistDrop
📋
ca__fx-flipTwistTiltIn
📋
ca__fx-flipTwistHover
📋
ca__fx-flipTwistTiltHover
📋
ca__fx-flipTwistZoomHover
📋
ca__fx-flipTwistOutRight
📋
ca__fx-flipTwistOutLeft
📋
ca__fx-flipTwistOutTop
📋
ca__fx-flipTwistOutZoom
📋
Fly In/Out
ca__fx-flyInTop
📋
ca__fx-flyInBottom
📋
ca__fx-flyOutTop
📋
ca__fx-flyOutBottom
📋
Glitch
ca__fx-microGlitch
📋
ca__fx-glitchPopIn
📋
ca__fx-glitchExit
📋
ca__fx-glitchJitter
📋
ca__fx-glitchSlice
📋
ca__fx-glitchSliceYank
📋
ca__fx-glitchSliceExitSharp
📋
ca__fx-glitchSliceInSharp
📋
ca__fx-glitchSliceInTilt
📋
ca__fx-glitchSliceTilt
📋
ca__fx-glitchSliceExitTilt
📋
ca__fx-glitchSliceCrack
📋
ca__fx-glitchSliceInCollapse
📋
ca__fx-glitchSliceStagger
📋
ca__fx-glitchFlash
📋
ca__fx-hologramPulse
📋
ca__fx-typewriterCorrupt
📋
ca__fx-glitchScanBurst
📋
ca__fx-hudAlertGlitch
📋
ca__fx-glitchSequence
📋
ca__fx-corruptTextOffset
📋
ca__fx-dataTypeCascadeOut
📋
ca__fx-criticalBreach
📋
ca__fx-corruptTextScramble
📋
ca__fx-glitchCompressIn
📋
ca__fx-glitchCompressOut
📋
Magical
ca__fx-sparklePopIn
📋
ca__fx-wandReveal
📋
ca__fx-magicDustExit
📋
ca__fx-scanReveal
📋
ca__fx-systemBootIn
📋
ca__fx-signalDropOut
📋
ca__fx-approveBounce
📋
ca__fx-whisperFloatIn
📋
ca__fx-aetherGlowRise
📋
ca__fx-glintReveal
📋
ca__fx-enchantFloatDrop
📋
Moon
ca__fx-moonEclipseIn
📋
ca__fx-moonEclipseOut
📋
ca__fx-moonSlideInCrescent
📋
ca__fx-moonSliceReveal
📋
ca__fx-crescentOrbitRevealLeft
📋
ca__fx-crescentOrbitRevealRight
📋
ca__fx-moonSliceUp
📋
ca__fx-moonPhaseReveal
📋
ca__fx-lunarVeilIn
📋
ca__fx-moonRippleGlow
📋
ca__fx-moonDustFloat
📋
ca__fx-moonTiltRise
📋
ca__fx-moonCyclePulse
📋
Moon Fade
ca__fx-moonFade
📋
ca__fx-moonFadeUp
📋
ca__fx-moonFadeDown
📋
ca__fx-moonFadeLeft
📋
ca__fx-moonFadeRight
📋
ca__fx-moonFadeScaleUp
📋
ca__fx-moonFadeSlow
📋
ca__fx-moonFadeStrong
📋
ca__fx-moonFadeOut
📋
ca__fx-moonFadeOutUp
📋
ca__fx-moonFadeOutDown
📋
ca__fx-moonFadeOutLeft
📋
ca__fx-moonFadeOutRight
📋
ca__fx-moonFadeOutScale
📋
Mask Wipe
ca__fx-mask-wipeInLeft
📋
ca__fx-mask-wipeInRight
📋
ca__fx-mask-wipeInTop
📋
ca__fx-mask-wipeInBottom
📋
ca__fx-mask-wipeOutLeft
📋
ca__fx-mask-wipeOutRight
📋
ca__fx-mask-wipeOutTop
📋
ca__fx-mask-shutterLinesIn
📋
ca__fx-mask-stripesWideIn
📋
ca__fx-mask-wipeOutBottom
📋
Masking Stripe
ca__fx-maskHorizontalBarsIn
📋
ca__fx-maskStripesIn
📋
ca__fx-maskZigzagRevealIn
📋
ca__fx-maskZigzagRevealIn
📋
ca__fx-maskCheckerboardIn
📋
ca__fx-maskDiamondIn
📋
ca__fx-maskLinesSlideIn
📋
ca__fx-maskRainRevealIn
📋
ca__fx-maskStripesThinIn
📋
ca__fx-maskStripesThinOut
📋
ca__fx-maskThreadLinesIn
📋
ca__fx-maskStairStepIn
📋
ca__fx-maskStripesHorizontalReverseOut
📋
ca__fx-maskStripesVerticalIn
📋
ca__fx-maskStripesVerticalOut
📋
ca__fx-maskStripesHorizontalReverseIn
📋
ca__fx-maskStripesDiagonalLeftIn
📋
ca__fx-maskStripesDiagonalUpIn
📋
ca__fx-maskStripesJitterIn
📋
ca__fx-maskStripesDiagonalLeftOut
📋
ca__fx-maskStripesDiagonalUpOut
📋
ca__fx-maskStripesWideOut
📋
ca__fx-maskStripesJitterOut
📋
Kite
ca__fx-kiteFloatInRight
📋
ca__fx-kiteFloatInLeft
📋
ca__fx-kiteHoverLoop
📋
ca__fx-kiteEntrySnap
📋
ca__fx-kiteWaveExit
📋
ca__fx-kiteWhipIn
📋
ca__fx-kiteSwingEntry
📋
ca__fx-kiteExitLift
📋
ca__fx-kiteSnapBounceIn
📋
ca__fx-kiteFlipTwist
📋
ca__fx-kiteTetheredFloat
📋
ca__fx-kiteCollapse
📋
ca__fx-kiteDragDrop
📋
Orbit 3D
ca__fx-orbitRevealLeft
📋
ca__fx-orbitExitLeft
📋
ca__fx-orbitRevealRight
📋
ca__fx-orbitExitRight
📋
ca__fx-orbitRevealTop
📋
ca__fx-orbitRevealBottom
📋
ca__fx-orbitReveal3
📋
ca__fx-orbitReveal4
📋
ca__fx-orbitRevealDiagonalLeft
📋
ca__fx-orbitExitDiagonalLeft
📋
ca__fx-orbitRevealDiagonalRight
📋
ca__fx-orbitExitDiagonalRight
📋
ca__fx-orbitRevealFromTopRight
📋
ca__fx-orbitRevealFromTopLeft
📋
ca__fx-orbitRevealFromBottomLeft
📋
ca__fx-orbitRevealFromBottomRight
📋
ca__fx-orbitSwingFromTopRight
📋
ca__fx-orbitSwingFromTopLeft
📋
ca__fx-orbitSwingFromBottomLeft
📋
ca__fx-orbitSwingFromBottomRight
📋
ca__fx-orbitSpiralIn
📋
ca__fx-orbitPopTwistIn
📋
ca__fx-orbitSwingFlipIn
📋
ca__fx-orbitSwingFlipOut
📋
ca__fx-orbitSwirlReveal
📋
ca__fx-orbitSwirlExit
📋
ca__fx-orbitRollIn3D
📋
ca__fx-orbitRollOut3D
📋
ca__fx-orbitTiltReveal
📋
ca__fx-orbitTiltExit
📋
ca__fx-orbitHelixRise
📋
ca__fx-orbitHelixFall
📋
Playful
ca__fx-snapGridEntry
📋
ca__fx-snapGridExit
📋
ca__fx-bounceInWaddle
📋
ca__fx-bounceOutWaddle
📋
Heartbeat
ca__fx-heartbeatSlow
📋
ca__fx-heartbeatFast
📋
ca__fx-pulseShake
📋
ca__fx-elasticPulse
📋
Nature
ca__fx-petalDrop
📋
ca__fx-petalLiftOut
📋
ca__fx-leafFloatIn
📋
ca__fx-leafFloatAway
📋
Shake
ca__fx-horizontalShake
📋
ca__fx-verticalShake
📋
ca__fx-madMax
📋
ca__fx-coolHorizontalShake
📋
ca__fx-coolVerticalShake
📋
ca__fx-quietMad
📋
ca__fx-vibration
📋
Slide In & Out
ca__fx-moveFromLeft
📋
ca__fx-moveFromRight
📋
ca__fx-moveFromTop
📋
ca__fx-moveFromBottom
📋
ca__fx-moveToLeft
📋
ca__fx-moveToRight
📋
ca__fx-moveToTop
📋
ca__fx-moveToBottom
📋
Step Animation
ca__fx-stepTypeIn
📋
ca__fx-stepSlideInX
📋
ca__fx-stepSlideOutX
📋
ca__fx-stepZoomIn
📋
ca__fx-stepZoomOut
📋
ca__fx-stepFadeUp
📋
ca__fx-stepFadeDown
📋
ca__fx-stepGlitchIn
📋
ca__fx-stepGlitchOut
📋
ca__fx-slideInSteps
📋
ca__fx-stepRotateIn
📋
ca__fx-stepRotateOut
📋
ca__fx-stepJumpIn
📋
ca__fx-stepJumpOut
📋
ca__fx-stepScalePopIn
📋
ca__fx-stepScalePopOut
📋
ca__fx-stepBlurReveal
📋
ca__fx-stepBlurOut
📋
Swing
ca__fx-swing
📋
ca__fx-swingUp
📋
ca__fx-swingIn
📋
ca__fx-swingOut
📋
ca__fx-swingZoom
📋
ca__fx-swingPop
📋
ca__fx-swingSkew
📋
ca__fx-swingInFromLeft
📋
ca__fx-swingInFromTop
📋
ca__fx-swingInFromBottom
📋
ca__fx-swingOutToRight
📋
ca__fx-swingOutToLeft
📋
ca__fx-swingOutToTop
📋
ca__fx-swingOutToBottom
📋
ca__fx-swingInFromRight
📋
ca__fx-swingInFromLeft
📋
ca__fx-swingDrop
📋
ca__fx-swingDropSoft
📋
ca__fx-swingDropHard
📋
ca__fx-swingDropBounce
📋
ca__fx-swingDropTwist
📋
ca__fx-swingDropElastic
📋
ca__fx-swingDropChain
📋
ca__fx-swingDropHover
📋
ca__fx-swingDropKite
📋
ca__fx-swingDropSnap
📋
ca__fx-swingDropMagnet
📋
Sci-Fi UI
ca__fx-scifiFlickerIn
📋
ca__fx-digitalScanlineReveal
📋
ca__fx-scifiDigitalReveal
📋
Pull & Push
ca__fx-pullRelease
📋
ca__fx-pushRelease
📋
ca__fx-pushReleaseFrom
📋
ca__fx-pushReleaseFromLeft
📋
ca__fx-pushReleaseFromRight
📋
ca__fx-pushReleaseFromTop
📋
ca__fx-pushReleaseFromBottom
📋
ca__fx-pushReleaseTo
📋
ca__fx-pushReleaseToLeft
📋
ca__fx-pushReleaseToRight
📋
ca__fx-pushReleaseToTop
📋
ca__fx-pushReleaseToBottom
📋
Roll & Spin
ca__fx-rollFromLeft
📋
ca__fx-rollFromRight
📋
ca__fx-rollFromTop
📋
ca__fx-rollFromBottom
📋
ca__fx-rollToLeft
📋
ca__fx-rollToRight
📋
ca__fx-rollToTop
📋
ca__fx-rollToBottom
📋
ca__fx-spinFromLeft
📋
ca__fx-spinFromRight
📋
ca__fx-spinFromTop
📋
ca__fx-spinFromBottom
📋
ca__fx-spinToLeft
📋
ca__fx-spinToRight
📋
ca__fx-spinToTop
📋
ca__fx-spinToBottom
📋
Rotate Animations
ca__fx-rotateInLeft
📋
ca__fx-rotateInRight
📋
ca__fx-rotateInTop
📋
ca__fx-rotateInBottom
📋
ca__fx-rotateOutLeft
📋
ca__fx-rotateOutRight
📋
ca__fx-rotateOutTop
📋
ca__fx-rotateOutBottom
📋
ca__fx-rotate
📋
ca__fx-rotateX
📋
ca__fx-rotateXIn
📋
ca__fx-rotateXOut
📋
ca__fx-rotateY
📋
ca__fx-rotateYIn
📋
ca__fx-rotateYOut
📋
Shock & Swing
ca__fx-swing
📋
ca__fx-shockZoom
📋
ca__fx-shockInLeft
📋
ca__fx-shockInRight
📋
ca__fx-shockInTop
📋
ca__fx-shockInBottom
📋
ca__fx-swingInLeft
📋
ca__fx-swingInRight
📋
ca__fx-swingInTop
📋
ca__fx-swingInBottom
📋
Zoom Effects
ca__fx-zoomIn
📋
ca__fx-zoomInLeft
📋
ca__fx-zoomInRight
📋
ca__fx-zoomInTop
📋
ca__fx-zoomInBottom
📋
ca__fx-zoomOut
📋
ca__fx-zoomOutLeft
📋
ca__fx-zoomOutRight
📋
ca__fx-zoomOutTop
📋
ca__fx-zoomOutBottom
📋
ca__fx-snapZoom
📋
ca__fx-zoomOutRotateUp
📋
ca__fx-bounceZoomIn
📋
ca__fx-bounceZoomOut
📋
ca__fx-zoomPingExit
📋
ca__fx-zoomToTarget
📋
Spotlight
ca__fx-unfoldAndRise
📋
ca__fx-hu__hu__
📋
ca__fx-peekpeek
📋
ca__fx-pepe
📋
ca__fx-lightning
📋
ca__fx-joltZoom
📋
ca__fx-jigglypop
📋
ca__fx-wooble
📋
ca__fx-kickOutBehind
📋
ca__fx-kickOutFront
📋
ca__fx-colorFlicker
📋
Text Animation
ca__fx-effect3d
📋
ca__fx-neonGlow
📋
ca__fx-colorPulse
📋
ca__fx-trackExpand
📋
ca__fx-trackCollapse
📋
ca__fx-gradientText
📋
ca__fx-rainbowText
📋
Quake & Quiver Series
ca__fx-jitter
📋
ca__fx-jiggle
📋
ca__fx-quiver
📋
ca__fx-tremor
📋
ca__fx-rumble
📋
ca__fx-wiggle
📋
ca__fx-rattle
📋
ca__fx-electricity
📋
ca__fx-buzz
📋
WOW
ca__fx-blurTrailIn
📋
ca__fx-blurTrailOut
📋
ca__fx-layerPeelIn
📋
ca__fx-layerPeelOut
📋
ca__fx-squishPop
📋
ca__fx-gravityPullIn
📋
ca__fx-slinkyStretch
📋
ca__fx-wobbleEntry
📋
ca__fx-peelDropIn
📋
ca__fx-vibeInPop
📋
ca__fx-flickerPop
📋
ca__fx-dropSpinIn
📋
ca__fx-breezeLift
📋
ca__fx-featherFloat
📋
ca__fx-powerUpPop
📋
ca__fx-levelUnlock
📋
ca__fx-softPulseIdle
📋
ca__fx-shimmerWaveIdle
📋
ca__fx-gearSnapIn
📋
ca__fx-joyBounceIn
📋
ca__fx-blushSlideIn
📋
ca__fx-stampSmash
📋
ca__fx-comboLevelRise
📋
ca__fx-wiggleReactive
📋
ca__fx-pulseGlow
📋
ca__fx-cosmicReveal
📋
ca__fx-scribbleGlowIn
📋
ca__fx-panelUnfold
📋
ca__fx-inertiaSlideIn
📋
Other