Animations activated on :hover

bounce

flash

pulse

shake

swing

tada

wobble

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOutOn

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flip

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

slideInDown

slideInLeft

slideInRight

slideOutLeft

slideOutRight

slideOutUp

hinge

rollIn

rollOut

Example

Hover me

<p class="animated tadaOnHover">Hover me</p>

List of animations

  • bounceOnHover
  • flashOnHover
  • pulseOnHover
  • shakeOnHover
  • swingOnHover
  • tadaOnHover
  • wobbleOnHover
  • bounceInOnHover
  • bounceInDownOnHover
  • bounceInLeftOnHover
  • bounceInRightOnHover
  • bounceInUpOnHover
  • bounceOutOnHover
  • bounceOutDownOnHover
  • bounceOutLeftOnHover
  • bounceOutRightOnHover
  • bounceOutUpOnHover
  • fadeInOnHover
  • fadeInDownOnHover
  • fadeInDownBigOnHover
  • fadeInLeftOnHover
  • fadeInLeftBigOnHover
  • fadeInRightOnHover
  • fadeInRightBigOnHover
  • fadeInUpOnHover
  • fadeInUpBigOnHover
  • fadeOutOnHover
  • fadeOutDownOnHover
  • fadeOutDownBigOnHover
  • fadeOutLeftOnHover
  • fadeOutLeftBigOnHover
  • fadeOutRightOnHover
  • fadeOutRightBigOnHover
  • fadeOutUpOnHover
  • fadeOutUpBigOnHover
  • flipOnHover
  • flipInXOnHover
  • flipInYOnHover
  • flipOutXOnHover
  • flipOutYOnHover
  • lightSpeedInOnHover
  • lightSpeedOutOnHover
  • rotateInOnHover
  • rotateInDownLeftOnHover
  • rotateInDownRightOnHover
  • rotateInUpLeftOnHover
  • rotateInUpRightOnHover
  • rotateOutOnHover
  • rotateOutDownLeftOnHover
  • rotateOutDownRightOnHover
  • rotateOutUpLeftOnHover
  • rotateOutUpRightOnHover
  • slideInDownOnHover
  • slideInLeftOnHover
  • slideInRightOnHover
  • slideOutLeftOnHover
  • slideOutRightOnHover
  • slideOutUpOnHover
  • hingeOnHover
  • rollInOnHover
  • rollOutOnHover

Animations activated on viewport

tada

fadeIn

fadeInDown

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

flipInX

flipInY

lightSpeedIn

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

slideInDown

slideInLeft

slideInRight

Example

The scroll load animation rotateInUpRight
<div class="rotateInUpRightOnView">The scroll load animation rotateInUpRight</div>

List of animations

  • pulseOnView
  • tadaOnView
  • fadeInOnView
  • fadeInDownOnView
  • fadeInLeftOnView
  • fadeInLeftBigOnView
  • fadeInRightOnView
  • fadeInRightBigOnView
  • fadeInUpOnView
  • fadeInUpBigOnView
  • flipInXOnView
  • flipInYOnView
  • lightSpeedInOnView
  • rotateInOnView
  • rotateInDownLeftOnView
  • rotateInDownRightOnView
  • rotateInUpLeftOnView
  • rotateInUpRightOnView
  • slideInDownOnView
  • slideInLeftOnView
  • slideInRightOnView
Terms Of UsePrivacy StatementCopyright 2024 by DNN Corp
Back To Top