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

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
03 Oct 19 by Administrator 192
Step 1: title Maximum of 65 characters <title>your keyword rich title of the website and/or webpage</title> Step 2: description Maximum of 155 characters <meta name="description"
28 Nov 19 by Administrator 132
Custom URL eligibility To create a custom URL for your channel, your account needs to: Have 100 or more subscribers Be at least 30 days old Have an uploaded photo as a channel icon Have uploa
01 Nov 19 by Administrator 163
For multiuser envirment MS SQL slows down queries due to following reason Using subquery Using functions
by 204
<nav class="w3-sidebar w3-bar-block w3-theme-d2 w3-card w3-hide w3-large z5 w3-animate-left" style="top: 0; width: 250px;"><a onclick="$('.w3-sidebar, .w3-overlay').toggleClass('w3-hide');" c
by 261
Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .class,.class $(".intro
12590

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

Login
×
Remember me
Forgot password?