Request Dev Services »

theDevTip.com / Notes /

Simple CSS / jQuery chaining animation demo

Simple jQuery and CSS3 chaining animation with Jsfiddle demo. Some key terms; .toggleClass, .text, transformtransition, setTimeout, rotate().

// Adspace available! //

Using a series of setTimeout(functions)’s to increment time, we toggle between class ‘.move‘ and ‘.move-2‘ between intervals and then eventually remove the previous class, all while updating the inner HTML text, and rotating the position of the text with CSS. This type of animation is known as jQuery and CSS chain animations.

jQuery

setTimeout(function(){
  $('a.tag-link-4').toggleClass('move'); 
  $('a.tag-link-4').text("Class Toggled!");    
},1000);
setTimeout(function(){
  $('a.tag-link-4').toggleClass('move-2');  
},3000);
setTimeout(function(){
  $('a.tag-link-4').removeClass('move-2');
  $('a.tag-link-4').text("I'm back!");
},4500);
setTimeout(function(){
  $('a.tag-link-4').removeClass('move');
  $('a.tag-link-4').text("That was fun.");
},5500);

CSS3

a.tag-link-4 { 
    position: absolute;
    left: 20%;
    top: 30%;
}
.move { 
    position: absolute;
    opacity: .3;
    width: 200%;
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    font-size: 2rem;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;    
}
.move-2 { 
    position: absolute;
    opacity: .6;
    top: 60%;    
    width: 200%;
    font-size: 4rem;        
   -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);	
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;  
}

Live Demo on JSfiddle.

P.S. Don’t worry, we’ll talk about optimizing those repetitive setTimeouts in a later post.

 

About the Author
Cameron Cashwell Web Developer
I build websites, web apps, and software. Wanna work together? Let's chat about your project!

Leave a Reply

Be the First to Comment!

Notify of
avatar