Animation
Features  >  Short Codes  >  Animation

Animation Delay


<div class="animation">
   <div class="row mb-20">
       <div class="col-sm-3 animation_item scaleUp delay1"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay2"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay3"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay4"><img src="/portals/32/Photo2.jpg" /></div>
   </div>
   <div class="row mb-20">
       <div class="col-sm-3 animation_item scaleUp delay5"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay6"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay7"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay8"><img src="/portals/32/Photo2.jpg" /></div>
   </div>
   <div class="row">
       <div class="col-sm-3 animation_item scaleUp delay9"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay10"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay11"><img src="/portals/32/Photo2.jpg" /></div>
       <div class="col-sm-3 animation_item scaleUp delay12"><img src="/portals/32/Photo2.jpg" /></div>
   </div>
</div>

Animation Hover


<div class="row">
    <div class="col-sm-3 animationhover bounce"> <img src="/portals/32/Photo3.jpg" /> </div>
    <div class="col-sm-3 animationhover flash"> <img src="/portals/32/Photo3.jpg" /> </div>
    <div class="col-sm-3 animationhover pulse"> <img src="/portals/32/Photo3.jpg" /> </div>
    <div class="col-sm-3 animationhover rubberBand"> <img src="/portals/32/Photo3.jpg" /> </div>
</div>

Bounce


<div class="animationhover bounce"> <img src="/portals/32/Photo4.jpg" /> </div>

Flash


<div class="animationhover flash"> <img src="/portals/32/Photo5.jpg" /> </div>

Pulse


<div class="animationhover pulse"> <img src="/portals/32/Photo6.jpg" /> </div>

RubberBand


<div class="animationhover rubberBand"> <img src="/portals/32/Photo7.jpg" /> </div>

Shake


<div class="animationhover shake"> <img src="/portals/32/Photo8.jpg" /> </div>

Swing


<div class="animationhover swing"> <img src="/portals/32/Photo1.jpg" /> </div>

Tada


<div class="animationhover tada"> <img src="/portals/32/Photo2.jpg" /> </div>

Wobble


<div class="animationhover wobble"> <img src="/portals/32/Photo3.jpg" /> </div>

Bouncing


<div class="animation bounceIn"> <img src="/portals/32/Photo4.jpg" /> </div>

<div class="animation bounceInDown"> <img src="/portals/32/Photo5.jpg" /> </div>
<div class="animation bounceInLeft"> <img src="/portals/32/Photo6.jpg" /> </div>
<div class="animation bounceInRight"> <img src="/portals/32/Photo7.jpg" /> </div>
<div class="animation bounceInUp"> <img src="/portals/32/Photo8.jpg" /> </div>

Fading


<div class="animation fadeIn"> <img src="/portals/32/Photo4.jpg" /> </div>

<div class="animation fadeInDown"> <img src="/portals/32/Photo5.jpg" /> </div>
<div class="animation fadeInLeft"> <img src="/portals/32/Photo6.jpg" /> </div>
<div class="animation fadeInRight"> <img src="/portals/32/Photo7.jpg" /> </div>
<div class="animation fadeInUp"> <img src="/portals/32/Photo8.jpg" /> </div>

<div class="animation fadeInDownBig"> <img src="/portals/32/Photo1.jpg" /> </div>
<div class="animation fadeInLeftBig"> <img src="/portals/32/Photo2.jpg" /> </div>
<div class="animation fadeInRightBig"> <img src="/portals/32/Photo3.jpg" /> </div>
<div class="animation fadeInUpBig"> <img src="/portals/32/Photo4.jpg" /> </div>

Flippers


<div class="animation flip"> <img src="/portals/32/Photo4.jpg" /> </div>
<div class="animation flipInX"> <img src="/portals/32/Photo5.jpg" /> </div>
<div class="animation flipInY"> <img src="/portals/32/Photo6.jpg" /> </div>

Lightspeed


<div class="animation lightSpeedIn"> <img src="/portals/32/Photo7.jpg" /> </div>

Rotating


<div class="animation rotateIn"> <img src="/portals/32/Photo8.jpg" /> </div>

<div class="animation rotateInDownLeft"> <img src="/portals/32/Photo1.jpg" /> </div>
<div class="animation rotateInDownRight"> <img src="/portals/32/Photo2.jpg" /> </div>
<div class="animation rotateInUpLeft"> <img src="/portals/32/Photo3.jpg" /> </div>
<div class="animation rotateInUpRight"> <img src="/portals/32/Photo4.jpg" /> </div>

Specials


<div class="animation rollIn"> <img src="/portals/32/Photo5.jpg" /> </div>

Zoom


<div class="animation zoomIn"> <img src="/portals/32/Photo6.jpg" /> </div>

<div class="animation zoomInDown"> <img src="/portals/32/Photo7.jpg" /> </div>
<div class="animation zoomInLeft"> <img src="/portals/32/Photo8.jpg" /> </div>
<div class="animation zoomInRight"> <img src="/portals/32/Photo1.jpg" /> </div>
<div class="animation zoomInUp"> <img src="/portals/32/Photo2.jpg" /> </div>