ChangeHover Documentation

Everything you need to know to implement and customize our 150+ CSS hover animations.

Get Started Animation Gallery

Installation

Add ChangeHover to your project with these simple methods:

CDN Links

Full Library: All animations in one file (core + border + text) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rajkumarnimod/changehover/dist/changehover.min.css">

Core Only: Include fade, grow, pulse, bounce, etc. (94 + Animations) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rajkumarnimod/changehover/dist/core.min.css">

Border Effects: Animated borders like full, gradient, dashed, etc.(9+ Animations) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rajkumarnimod/changehover/dist/borders.min.css">

Text Effects: Animate text with wave, glitch, neon, reveal, etc.(19+ Animations) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rajkumarnimod/changehover/dist/text.min.css">

Download Manually

Download the CSS file and include it in your project:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rajkumarnimod/changehover/dist/changehover.min.css">

Basic Usage

Available Animation Classes

ChangeHover provides 150+ animation classes across several categories:

  • Core: ch-fade, ch-grow, ch-shrink, ch-pulse, etc.
  • Text: ch-text-gradient, ch-text-wave, ch-text-glitch, etc.
  • Background: ch-bg-ltr, ch-bg-radial, ch-bg-gradient, etc.
  • Border: ch-border-ltr, ch-border-wave, ch-border-dashed, etc.

How to Apply Animations

Apply animations by adding hover: attributes to your HTML elements:

Core Animations

Hover Me
<div hover:ch-bounce>
  Hover Me
</div>

All Core Animations : -

  • hover:ch-fade
  • hover:ch-grow
  • hover:ch-shrink
  • hover:ch-pulse
  • hover:ch-pulse-grow
  • hover:ch-pulse-shrink
  • hover:ch-push
  • hover:ch-pop
  • hover:ch-bounce-in
  • hover:ch-bounce-out
  • hover:ch-rotate
  • hover:ch-rotate-grow
  • hover:ch-float
  • hover:ch-sink
  • hover:ch-bob
  • hover:ch-hang
  • hover:ch-skew
  • hover:ch-skew-forward
  • hover:ch-skew-backward
  • hover:ch-wobble-horizontal
  • hover:ch-wobble-vertical
  • hover:ch-buzz
  • hover:ch-buzz-out
  • hover:ch-forward
  • hover:ch-backward
  • hover:ch-fade-back
  • hover:ch-back-pulse
  • hover:ch-bounce
  • hover:ch-flash
  • hover:ch-rubberBand
  • hover:ch-shakeX
  • hover:ch-shakeY
  • hover:ch-headShake
  • hover:ch-swing
  • hover:ch-tada
  • hover:ch-jello
  • hover:ch-heartBeat
  • hover:ch-backInDown
  • hover:ch-backInLeft
  • hover:ch-backInRight
  • hover:ch-backInUp
  • hover:ch-backOutDown
  • hover:ch-backOutLeft
  • hover:ch-backOutRight
  • hover:ch-backOutUp
  • hover:ch-bounceIn
  • hover:ch-bounceInDown
  • hover:ch-bounceInLeft
  • hover:ch-bounceInRight
  • hover:ch-bounceInUp
  • hover:ch-bounceOut
  • hover:ch-bounceOutDown
  • hover:ch-bounceOutLeft
  • hover:ch-bounceOutRight
  • hover:ch-bounceOutUp
  • hover:ch-fadeIn
  • hover:ch-fadeInDown
  • hover:ch-fadeInLeft
  • hover:ch-fadeInRight
  • hover:ch-fadeInUp
  • hover:ch-fadeOut
  • hover:ch-fadeOutDown
  • hover:ch-fadeOutLeft
  • hover:ch-fadeOutRight
  • hover:ch-fadeOutUp
  • hover:ch-flip
  • hover:ch-flipInX
  • hover:ch-flipInY
  • hover:ch-flipOutX
  • hover:ch-flipOutY
  • hover:ch-lightSpeedInRight
  • hover:ch-lightSpeedInLeft
  • hover:ch-lightSpeedOutRight
  • hover:ch-lightSpeedOutLeft
  • hover:ch-rotateIn
  • hover:ch-rotateInDownLeft
  • hover:ch-rotateInDownRight
  • hover:ch-rotateInUpLeft
  • hover:ch-rotateInUpRight
  • hover:ch-rotateOut
  • hover:ch-rotateOutDownLeft
  • hover:ch-rotateOutDownRight
  • hover:ch-rotateOutUpLeft
  • hover:ch-rotateOutUpRight
  • hover:ch-hinge
  • hover:ch-jackInTheBox
  • hover:ch-rollIn
  • hover:ch-rollOut
  • hover:ch-zoomIn
  • hover:ch-zoomInDown
  • hover:ch-zoomInLeft
  • hover:ch-zoomInRight
  • hover:ch-zoomInUp
  • hover:ch-zoomOut
  • hover:ch-zoomOutDown
  • hover:ch-zoomOutLeft
  • hover:ch-zoomOutRight
  • hover:ch-zoomOutUp
  • hover:ch-slideInDown
  • hover:ch-slideInLeft
  • hover:ch-slideInRight
  • hover:ch-slideInUp
  • hover:ch-slideOutDown
  • hover:ch-slideOutLeft
  • hover:ch-slideOutRight
  • hover:ch-slideOutUp

Text Animations

Hover Me 
<div hover:ch-text-gradient-flow hover:ch-text-bounce>
  Hover Me
</div>

All Text Animations : -

  • hover:ch-text-gradient-flow
  • hover:ch-text-glitch
  • hover:ch-text-neon
  • hover:ch-text-bounce
  • hover:ch-text-wave
  • hover:ch-text-rotate3d
  • hover:ch-text-fade-in
  • hover:ch-text-slide-in
  • hover:ch-text-zoom-in
  • hover:ch-text-shake
  • hover:ch-text-pulse
  • hover:ch-text-wobble
  • hover:ch-text-blink
  • hover:ch-text-swing
  • hover:ch-text-jelly
  • hover:ch-text-skew
  • hover:ch-text-fly-in
  • hover:ch-text-reveal

Border Animations

Hover Me 
<div hover:ch-border-ltr> 

<span class="ch-animation-helper"> </span> 

  Hover Me 

</div>

All Border Animations : -

  • hover:ch-border-ltr
  • hover:ch-border-rtl
  • hover:ch-border-ttb
  • hover:ch-border-btt
  • hover:ch-border-dashed
  • hover:ch-border-radius
  • hover:ch-border-wave
  • hover:ch-border-shimmer
  • hover:ch-border-flow

Note: For border animations to work correctly, include an empty <span class="ch-animation-helper"></span> inside the animated element.

Text Effects

Special animations designed specifically for text elements:

Gradient Flow

text-bounce Effect

<h4 hover:ch-text-gradient-flow>Gradient Flow</h4>
<h4 hover:ch-text-bounce>text-bounce Effect</h4>