+91 9422537131 | info@adhvik.online |
Sports Sagaa | Simplicity Global Services Register
02 Dec 19 by Administrator 68

Animations

To animate an element, add the class animated to an element. You can include the class infinite for an infinite loop. Finally you need to add one of the following classes to the element:

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Full example:

<h1 class="animated infinite bounce delay-2s">Example</h1>

Check out all the animations here!

It's possible to change the duration of your animations, add a delay or change the number of times that it plays:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

You can also detect when an animation ends:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

You can use this simple function to add and remove the animations:

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

And use it like this:

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

Notice that the examples are using ES6's const declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the const to var declarations and IE10 and some old browsers will get support (they still have to provide classList support, so do your research).

Setting Delay and Speed

Delay Class

It's possible to add delays directly on the element's class attribute, just like this:

<div class="animated bounce delay-2s">Example</div>
Class Name Delay Time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

Note: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code.

Slow, Slower, Fast, and Faster Class

It's possible to control the speed of the animation by adding these classes, as a sample below:

<div class="animated bounce faster">Example</div>
Class Name Speed Time
slow 2s
slower 3s
fast 800ms
faster 500ms

Note: The animated class has a default speed of 1s. If you need custom duration, add it directly to your own CSS code.

Tags:
Share Post
07 Jul 19 by Administrator 187
ddf" data-defaultdata="['Unmarried', 'Married', 'Divorced'] ddf" data-defaultdata="[{id:'M', 'text':'Male'}, {'id':'F', text:'Female'},{'id':'O', 'text':'Other'} ]" autofocus="autofocus ddl" val
19 Sep 19 by Administrator 135
<script src="https://kit.fontawesome.com/d7979cec49.js" crossorigin="anonymous"></script>
23 Sep 19 by Administrator 146
(5*252 + 4*124 + 3*40 + 2*29 + 1*33) / (252+124+40+29+33) = 4.11 and changealter table posts ALTER column TotalViews varchar(100)252+124+40+29+33 === this value added to TotalViews
23 Sep 19 by 77
https://developers.facebook.com/docs/facebook-login/web && <script>window.fbAsyncInit = function() {FB.init({appId : '1208343976013791',cookie : true,xfbml : true,version : 'v4.0'});F
by 231
Super Admin : Defined for developer and application other implementation to show some information required during development of the application. Admin : Definded for client only. Other roles as per
12570

We are simpliy creative. We create stunning identities for our clients that people recommand.

Login
×
Remember me
Forgot password?