Roxo Animation

ADMIN PANEL

Animation Shake X

You can use this animation by adding .animate__animated & .animate__shakeX

Preview Html
 <div class="circle animate__animated animate__infinite animate__shakeX"> 
</div>

Animation Head Shake

You can use this animation by adding .animate__animated & .animate__headShake

Preview Html
 <div class="circle animate__animated animate__infinite animate__headShake"> 
</div>

Animation Swing

You can use this animation by adding .animate__animated & .animate__swing

Preview Html
 <div class="circle animate__animated animate__infinite animate__swing"> 
</div>

Animation Shake Y

You can use this animation by adding .animate__animated & .animate__shakeY

Preview Html
 <div class="circle animate__animated animate__infinite animate__shakeY"> 
</div>

Animation Flash

You can use this animation by adding .animate__animated & .animate__flash

Preview Html
 <div class="circle animate__animated animate__infinite animate__flash"> 
</div>

Animation Pulse

You can use this animation by adding .animate__animated & .animate__pulse

Preview Html
 <div class="circle animate__animated animate__infinite animate__pulse"> 
</div>

Animation Rubber Band

You can use this animation by adding .animate__animated & .animate__rubberBand

Preview Html
 <div class="circle animate__animated animate__infinite animate__rubberBand"> 
</div>

Animation Tada

You can use this animation by adding .animate__animated & .animate__tada

Preview Html
 <div class="circle animate__animated animate__infinite animate__tada"> 
</div>

Animation Wobble

You can use this animation by adding .animate__animated & .animate__wobble

Preview Html
 <div class="circle animate__animated animate__infinite animate__wobble"> 
</div>

Animation Jello

You can use this animation by adding .animate__animated & .animate__jello

Preview Html
 <div class="circle animate__animated animate__infinite animate__jello"> 
</div>

Animation Heart Beat

You can use this animation by adding .animate__animated & .animate__heartBeat

Preview Html
 <div class="circle animate__animated animate__infinite animate__heartBeat"> 
</div>

Animation Hinge

You can use this animation by adding .animate__animated & .animate__hinge

Preview Html
 <div class="circle animate__animated animate__infinite animate__hinge"> 
</div>

Animation Jack In The Box

You can use this animation by adding .animate__animated & .animate__jackInTheBox

Preview Html
 <div class="circle animate__animated animate__infinite animate__jackInTheBox"> 
</div>

Animation Flip

You can use this animation by adding .animate__animated & .animate__flip

Preview Html
 <div class="circle animate__animated animate__infinite animate__flip"> 
</div>

Animation flip In X

You can use this animation by adding .animate__animated & .animate__flipInX

Preview Html
 <div class="circle animate__animated animate__infinite animate__flipInX"> 
</div>

Animation flip In Y

You can use this animation by adding .animate__animated & .animate__flipInY

Preview Html
 <div class="circle animate__animated animate__infinite animate__flipInY"> 
</div>

Animation flip Out X

You can use this animation by adding .animate__animated & .animate__flipOutX

Preview Html
 <div class="circle animate__animated animate__infinite animate__flipOutX"> 
</div>

Animation flip Out Y

You can use this animation by adding .animate__animated & .animate__flipOutY

Preview Html
 <div class="circle animate__animated animate__infinite animate__flipOutY"> 
</div>

Other Animation

Here is some animation classes list you can use

  • .animate__rotateIn
  • .animate__rotateInDownLeft
  • .animate__rotateInDownRight
  • .animate__rotateInUpLeft
  • .animate__rotateInUpRight
  • .animate__rotateOut
  • .animate__rotateOutDownLeft
  • .animate__rotateOutDownRight
  • .animate__rotateOutUpLeft
  • .animate__rotateOutUpRight
  • .animate__rollIn
  • .animate__rollOut
  • .animate__zoomIn
  • .animate__zoomInUp
  • .animate__zoomInDown
  • .animate__zoomInLeft
  • .animate__zoomInRight
  • .animate__bounceIn
  • .animate__bounceInDown
  • .animate__bounceInUp
  • .animate__bounceInLeft
  • .animate__bounceInRight
  • .animate__bounceOut
  • .animate__bounceOutDown
  • .animate__bounceOutUp
  • .animate__bounceOutLeft
  • .animate__bounceOutRight
  • .animate__slideInDown
  • .animate__slideInLeft
  • .animate__slideInRight
  • .animate__slideInUp
  • .animate__slideOutDown
  • .animate__slideOutLeft
  • .animate__slideOutRight
  • .animate__slideOutUp
  • .animate__fadeIn
  • .animate__fadeInDown
  • .animate__fadeInDownBig
  • .animate__fadeInLeft
  • .animate__fadeInLeftBig
  • .animate__fadeInRight
  • .animate__fadeInRightBig
  • .animate__fadeInUp
  • .animate__fadeInUpBig
  • .animate__fadeInTopLeft
  • .animate__fadeInTopRight
  • .animate__fadeInBottomLeft
  • .animate__fadeInBottomRight
  • .animate__backOutRight
  • .animate__fadeOut
  • .animate__fadeOutDown
  • .animate__fadeOutDownBig
  • .animate__fadeOutLeft
  • .animate__fadeOutLeftBig
  • .animate__fadeOutRight
  • .animate__fadeOutRightBig
  • .animate__fadeOutUp
  • .animate__fadeOutUpBig
  • .animate__fadeOutTopLeft
  • .animate__fadeOutTopRight
  • .animate__fadeOutBottomLeft
  • .animate__backOutLeft
  • .animate__fadeOutBottomRight
  • .animate__zoomOutDown
  • .animate__zoomOutLeft
  • .animate__zoomOutRight
  • .animate__zoomOut
  • .animate__zoomOutUp
  • .animate__backInDown
  • .animate__backInUp
  • .animate__backInLeft
  • .animate__backInRight
  • .animate__backOutDown
  • .animate__backOutUp

Adjustable, optional settings

All of these settings are optional, if not set basic animate.css fallback animationDuration speed is used. 

 plugins: [
  require('tailwindcss-animatecss')({
        classes: [],
        settings: {
           animatedSpeed: 1000,
           heartBeatSpeed: 1000,
           hingeSpeed: 2000,
           bounceInSpeed: 750,
           bounceOutSpeed: 750,
           animationDelaySpeed: 1000
        },
        variants: ['responsive', 'hover', 'reduced-motion'],
        }),
]
  • animatedSpeed used for the animationDuration of the .animated class
  • heartBeat used for the animationDuration of the .heartBeat class
  • hingeSpeed used for the animationDuration of the class
  • bounceInSpeed used for the animationDuration of the .bounceInSpeed class
  • bounceOutSpeed used for the animationDuration of the .bounceOutSpeed class
  • animationDelaySpeed used for the animationDelaySpeed, just add .delay class to your element animation by adding

Animation Controls Classes

You can also control animation by adding bellow classes

  • .animate__animated
  • .animate__infinite
  • .animate__delay
  • .animate__delay-1
  • .animate__delay-2
  • .animate__delay-3
  • .animate__delay-4
  • .animate__delay-5
  • .animate__fast
  • .animate__faster
  • .animate__slow
  • .animate__slower
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now