en-USde-DE
Language
Search
× Search
Menu
  1. Home
  2. Blog
  3. Gallery
  4. Groups
  5. Features
  6. Pages
  7. Contact us
    Address: Some address goes here
    Phone: +12 345 678 9
    Fax: +12 345 678 9
    Email: email@email.com
    Web: www.webpage.com

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica.

Saturday, May 26, 2018
FeaturesShort CodesAnimations

Animations

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