Posted 30th November -0001 | By ExtraMile

This blog post explains a little about how we can create animations using CSS3 and jQuery technologies to bring static objects (images of breakfast foods in this case) to life.

CSS3 animations are great to use because they're lightweight (have little effect on the loading time of a site), pretty easy to implement and will fall back nicely to their static state in unsupported browsers (IE9 and below).

You can apply animations that slide, expand, fade, bounce, float...the possibilities are endless.

The following steps will show you how we get started with animating our elements!

1. Create some animations in our stylesheet

We'll declare some animations which we'll be able to use by applying them as classes to objects on our site. There are various properties we may want to define, including a name for the animation, a duration, delay as well as specifying the animation using the @keyframes property, often using CSS3 transforms. Read more about CSS3 animation properties at W3C. Alternatively, we can download a stylesheet full of preset animations to plug-and-play straight into our project. There are lots of great resources out there, for example, this one by Justin Aguilar which I'll be using (with a few of my own modifications) to demonstrate some effects in just a moment. 

Here's a snippet of what my bounce animation CSS looks like:

.bounce {

  animation-name: bounce;
  -webkit-animation-name: bounce;

  animation-duration: 2.6s;
  -webkit-animation-duration: 2.6s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;

  visibility: visible !important;
}

2. Add our animation classes to our objects

Now we want to apply some of those animations to objects. I'm going to apply my .bounce class to my #muffin div with a bit of jQuery. I'd like the animation to start when I scroll a little further down the page, 1030 pixels from the top of the screen. Here's the code for that:

<script>
$(window).scroll(function() {
   $('#muffin').each(function(){
      var yPos = $(window).scrollTop();
      if (yPos >= 1030) {
         $(this).addClass("bounce");
      }
   });
});
</script>

You're probably seeing the bouncing muffin in your view now. Keep scrolling down the page to see a few more examples of these animations :)

A bouncing muffin!

Expanding croissants

Mmm floating pancakes

Big entrance eggs

 

extramile

About ExtraMile

A digital marketing agency with international capabilities