02 Dec 19 by Administrator 172 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 390
16 May 20 by Administrator 63

FullScreen YouTube Video Background In Pure CSS

18/08/2019 11:37:00 by Administrator 467
following is the codepen example  https://codepen.io/dudleystorey/pen/PZyMrd

Bootsnav Menu New Implementation

07/01/2020 03:31:00 by Administrator 235
file:///G:/Downloads/bootsnav-master/index.html# This plugin like implementation is required in website. Try

Animation.css Effects

02/12/2019 04:49:00 by Administrator 173
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 class

Date format in repeater asp.net

02/09/2019 07:29:00 by Administrator 317
<%# DataBinder.Eval(Container.DataItem, "ActionListDate", "{0:d/M/yyyy hh:mm:ss tt}") %> <%# string.Format("{0:ddd MMM yyyy}", Eval("ActionListDate"))%>

grids3 format for testimonial sawant academy

11/05/2020 14:31:00 by Administrator 57
<section class="parallax ai-object" style="background-image:url(_SawantAcademy/u/pos/202005/library--1920.jpg)">    <div class="aip32 mw g3">        <h2 cl

aio effects and animations

02/09/2019 19:49:00 by Administrator 269
E:\AIO-IMP\aos-master ### 👻 Animations There are serveral predefined animations you can use already: * Fade animations:* fade* fade-up* fade-down* fade-left* fade-right* fade-up-right* fade-up-lef

thefire data migration to new program

02/10/2019 01:26:00 by Administrator 286
insert into posts select companyid, ptypeid, postid, langid, lpostid1,lpostid2,plink, forid, ppostid,ptitle,pshort,pfull,postedby,metakey,metadescription,metadata,sortorder,postdate,postrate,totalview

Database Update

03/01/2020 06:57:00 by Administrator 170
CREATE VIEW vLinks ASSELECT 0 AS srt, 'vposts2' AS tbl, PTypeId, PostId, PTitle, PLink FROM postsUNIONSELECT 1 AS srt, 'vgeneralsettings' AS tbl, GTypeId, GId, GTitle, GLink FROM generalsettingsUNIONS

AOS Effects

01/12/2019 18:37:00 by Administrator 390
 Set animation using data-aos attribute: <div data-aos="fade-in"></div> And adjust behaviour by using data-aos-* attributes: <div data-aos="fade

JSON Import Export to MS SQL

07/07/2019 00:22:00 by Administrator 390
https://www.sqlshack.com/importexport-json-data-using-sql-server-2016/ For this update need database update to mssqlserver 2016 and there is update to base insert and view functions