CSS3 animations and their jQuery equivalents

Placed in: Home

As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.

CSS3 animations and their jQuery equivalents

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.

Demo CSS3 animations and their jQuery equivalents

Download CSS3 animations and their jQuery equivalents

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the -webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.

With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.

Video

Here's a small example video showing both the CSS3 and jQuery animations inside the latest version of Safari.

Of course, if you're running Safari or Chrome, you can view all examples yourself.

Fade

CSS3 and jQuery Animations - Fade

For our first effect, we'll do a simple fade. When hovering an element, it fades to a given opacity. Let's see how you can create this effect using both CSS3 and jQuery.

HTML

<img src="images/fadeimg.png" alt="Fade Image" class="css3_fadeimg" />

As you can see, I'm simply using an image which has class applied. As you can imagine, you can apply this class to other elements.

CSS3

 
@-webkit-keyframes fade {
   0% {
      opacity: 1.0;
   }
   100% {
      opacity: 0.5;
   }
}
 
.css3_fadeimg:hover {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1s;
}

With the animation-name and animation-duration, we can set the effect. Using the keyframes (and the name of the effect), we can tell the element how to act. Set the 0% and 100% properties, and the browser will calculate how to animate the effects. Great and easy!

jQuery

 
$(".jquery_fadeimg").hover(function() {
   $(this).stop().animate({ opacity: 0.5 }, 1000, function() {
      $(this).stop().animate({ opacity: 1.0 }, 0);
   });
}, function() {
   $(this).stop().animate({ opacity: 1.0 }, 0);
});

The jQuery example is just as elegant as the CSS3 one. Simply apply an hover event to the element and animate it over a given timespan.

Bounce

CSS3 and jQuery Animations - Bounce

Now that we know how to create a simple fade, we'll create an example which is a little bit harder: A bounce effect. We'll apply the effect to an image that'll bounce to the right (and back).

HTML

 
<div class="css3_bounce bounce">
   <img src="images/bounceimg.png" class="bounceimg" />
</div>

As you can see, there is a surrounding container that holds one image. We'll need the container to capture the hover effect, and the image will bounce inside the container.

CSS3

 
@-webkit-keyframes bounce {
   from {
      margin-left: 0px;
   }
   to {
      margin-left: 250px;
   }
}
 
.css3_bounce:hover img {
   -webkit-animation-name: bounce;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

Just like with the previous effect, the name and duration are needed in this effect. By setting the iteration-count to 2, it'll only bounce from left to right, to left and stop. Inside the keyframes, we can use the from and to properties too instead of the percentages.

jQuery

 
$(".jquery_bounce").mouseenter(function(){
   $("img", this).animate({ marginLeft : '250px' } , {
         duration: 1000,
         easing: 'easeOutCubic',
         complete:function() {
            $(this).animate({ marginLeft : '0px' } , {
            duration: 1000,
            easing: 'easeInCubic'});   
         }
      });
}).mouseleave(function() {
   $("img", this).stop().css({ marginLeft : '0px' });
});

With the help of the jQuery Easing Plugin we can recreate this beautiful effect in the exact same way as with CSS3. We'll simply change the marginLeft properties from the CSS (just like with CSS3). That's how you create a bounce!

Pulsate and Colorize

CSS3 and jQuery Animations - Pulsate and Colorize

On to the next step, an even more advanced animation. We'll pulsate and colorize a given division. Let's see how to create this effect.

HTML

<div class="css3_pulsate pulsate"></div>

As you can see, just a simply div is what we're going to use for this effect. Check out the other CSS properties (like width, hight and background-color) in the demo/download.

CSS3

 
@-webkit-keyframes pulsate {
  0% { width:100px; }
  5% { width:150px; left:-25px; }
  10% { width:100px; left:0px; }
  15% { width:150px; left:-25px; }
  20% { width:100px; left:0px; }
  
  40% { width:100px; background-color:#38374A; }
  45% { width:150px; left:-25px; background-color:#38374A; }
  50% { width:100px; left:0px; background-color:#38374A; }
  55% { width:150px; left:-25px; background-color:#38374A; }
  60% { width:100px; left:0px; background-color:#38374A; }
 
  80% { width:100px; background-color:#45002D; }
  100% { width:100px; background-color:#45002D; }
}
 
.css3_pulsate:hover {
  -webkit-animation-name: pulsate;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
}

I was pretty happy to see that the CSS3 implementation looks very good! By setting a value for each percentage of the animation, we can make it look like a pulsating box. We'll also change the colour of the box.

jQuery

 
$(".jquery_pulsate").hover(function() {
  $(this).stop().animate({ width: '150px', left:'-25px' }, 150, function(){
    $(this).animate({ width: '100px', left:'0px' }, 150, function() {
      $(this).animate({ width: '150px', left:'-25px' }, 150, function() {
        $(this).animate({ width: '100px', left:'0px' }, 150, function() {
          $(this).animate({ backgroundColor: '#38374A' }, 600, function() {
            $(this).animate({ width: '150px', left:'-25px' }, 150, function(){
              $(this).animate({ width: '100px', left:'0px' }, 150, function() {
                $(this).animate({ width: '150px', left:'-25px' }, 150, function() {
                  $(this).animate({ width: '100px', left:'0px' }, 150, function() {
                    $(this).animate({ backgroundColor: '#45002D' }, 600, function() {
                      $(this).animate({ backgroundColor: '#45002D' }, 600, function() {
                        $(this).animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1);
                      });
                    });
                  });
                });
              });
            });
          });
        });
      });
    });
  });
}, function() {
  $(this).stop().animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1);
});

The jQuery equilavent of this effect, isn't as pretty. We'll use the callback to animate each time and make it look like the pulsate. By using the jQuery Color Plugin, we can smoothly animate the background colour. Still, I really prefer the CSS3 animation way on this one.

Link nudge

CSS3 and jQuery Animations - Link Nudge

Let's move on to a more practical example - link nudging. I'm doing it at Marcofolio too - simply hover over the elements in the main menu and you'll see the effect. Let's see how you can create this effect with CSS3 animations too!

HTML

 
<div class="css3_nudge nudge">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>

Just a simple unordered list with list items that contains anchor tags (links). How simple can it get? On to the nudge effect.

CSS3

 
.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left;
   -webkit-transition-duration: 500ms, 500ms, 500ms;
}
         
.css3_nudge ul li a:hover {
   background-color: #efefef;
   color: #333;
   padding-left: 50px;
}

We're going to animate the anchor tags inside the list. By using the transition-property (shorthand version), we can animate more properties at the same time (given a certain duration). In the :hover state, we'll animate those properties. When the hover stops, it automatically changes back to the original state. Pretty clean and simple code.

jQuery

$(".jquery_nudge ul li a").hover(function(){
  $(this).stop().animate({ paddingLeft: '50px', backgroundColor: '#efefef', color : '#333' }, 500);  
}, function() {
  $(this).stop().animate({ paddingLeft: '25px', backgroundColor: '#ffffff', color : '#afafaf' }, 500);
});

The jQuery equivalent is just as elegant. By using the jQuery Color Plugin again, we can also colorize the backgroundColor and color properties with a smooth animation. Nice!

Accordion

CSS3 and jQuery Animations - Accordion

I have to admit - this is a little cheat by using a different HTML code for this effect. This is also the reason why, by default, the accorion (also on the example page) are different. The CSS3 version hasn't expanded, while the jQuery version does. Let's see why.

HTML - CSS3

 
<div class="css3_accordion accordion">
<a href="#firstacc" title="Expand">First accordion</a>
   <div id="firstacc"><p>First content</p></div>
   <a href="#secondacc" title="Expand">Second accordion</a>
   <div id="secondacc"><p>Second content</p></div>
   <a href="#thirdacc" title="Expand">Third accordion</a>
   <div id="thirdacc"><p>Third content</p></div>
</div>

As you can see, the anchor links, have the same text as the ID from the hidden divisions. This means, the links will append a # to the URL, making the div with the same ID active for the CSS3 :target property.

CSS3

 
.css3_accordion div {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 500ms ease; }
.css3_accordion div:target {
  height: 105px;
}

As you can see, once a div is a target, it'll change the height, showing the accordion effect. By default it's hidden (height: 0 and overflow: hidden, but we'll do a transition to show it. Pretty easy, isn't it?

HTML - jQuery

 
<div class="jquery_accordion accordion">
   <a href="#" title="Expand">First accordion</a>
   <div><p>First content</p></div>
   <a href="#" title="Expand">Second accordion</a>
   <div><p>Second content</p></div>
   <a href="#" title="Expand">Third accordion</a>
   <div><p>Third content</p></div>
</div>

The HTML for the jQuery version is slightly different. I needed to remove the ID's which were applied to the CSS3 menu. All other things are the same!

jQuery

 
$(".jquery_accordion").accordion({ header: 'a' });

The jQuery is, as you can see, really really short. But that only is the case, since I'm using the jQuery UI plugin. But this plugin doesn't allow to close the first tab, which is the reason why it's opened by default.

Conclusion and Download

There we go: 5 different CSS3 animations with their jQuery equivalents. CSS3 animation does have it elegancy in it's own way, but jQuery will have to do for now since that one is only cross-browser usable. The downside from the jQuery versions is that it generates loads of data, since you'll need to download jQuery and the needed plugins.

What do you think of these examples? Do you hope that animations will be added to the CSS standard soon? On do you prefer the jQuery way? Feel free to share your opinion.

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Destiny Islands - Really useful tut!

2009-12-15 02:40:29

wow this is such a useful tutorial, thanks for sharing on your blog! I know good tutorials aren't easy to come by these days, but following this was so easy and it'll be useful on my website