02 Dec 19 by Administrator 302 Css

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
DevelopmentCss 01 Dec 19 by Administrator 616
16 May 20 by Administrator 204

Owl Classes

02/12/2019 05:30:00 by Administrator 367
Classes This is an example of how html is rendered. With the following options you can change almost every class the way you want <div class="owl-carousel owl-theme owl-loaded"> <div c

fontawesome link address

19/09/2019 16:06:00 by Administrator 385
<script src="https://kit.fontawesome.com/d7979cec49.js" crossorigin="anonymous"></script>

facebook api for adhvik.online

23/09/2019 03:15:00 by 330
https://developers.facebook.com/docs/facebook-login/web && <script>window.fbAsyncInit = function() {FB.init({appId : '1208343976013791',cookie : true,xfbml : true,version : 'v4.0'});F

Web safe fonts

24/08/2019 11:22:00 by Administrator 475
There are few web safe fonts which can be widely used in websites. Arial Helvetica Times New Roman Times Courier New Courier Verdana Georgia Palatino Garamond Bookman Comic Sans MS Treb

background color change animation

02/09/2019 07:47:00 by Administrator 419
#colorchange { animation: colorchange 50s; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animati

Database Update

03/01/2020 04:54:00 by Administrator 293
ALTER TABLE Item ADD ILink varchar(3500)ALTER TABLE Item ADD IDImages varchar(7000) ALTER TABLE generalsettings ADD GLink varchar(3500) GO ALTER VIEW [dbo].[vItem]ASSELECT i1.ILink,i1.CompanyId, i1

allow content over cross link

29/08/2019 20:37:00 by Administrator 330
use following code in web.config <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add na

Navigator detect

06/04/2020 05:33:00 by Administrator 235
Navigation browser detect informationhttps://www.quirksmode.org/js/detect.htmlnavigator.vendorSub = navigator.productSub = 20030107navigator.vendor = Google Inc.navigator.maxTouchPoints = 0navigator.h

facebook sharing meta settings

03/10/2019 02:18:00 by Administrator 402
https://developers.facebook.com/docs/sharing/webmasters A Guide to Sharing for Webmasters This document describes how you optimize web-hosted content that people share to Facebook, regardles

Creating a quick and dirty jQuery contentEditable Plugin

17/08/2019 03:38:00 by Administrator 454
Here is the link for Creating a quick and dirty jQuery contentEditable Plugin https://weblog.west-wind.com/posts/2009/May/25/Creating-a-quick-and-dirty-jQuery-contentEditable-Plugin