Since we just launched the new Nerdy House Website I thought I’d share a very simple techniques for using CSS transitions for creating some pretty cool animations very quickly. The nice thing about this technique is that it uses very minimal javascript, which makes it perfect for those of you who may be more on the HTML/CSS layout side of things than in the programming camp. I also feel confident sharing this technique now because the support for CSS transitions has become nearly standard across modern browsers which is more than I could say a year or so ago! You can check out some of these effects on the new Nerdy House homepage.
Overview of This Technique
Basically, what we will be doing is creating an HTML element with a certain set of styles applied to it. Lets give our element the id ‘#object’. ‘#object’ will also have some CSS transitions applied to it which will help our animations later on. We will then create a class ‘.animate’ which will change some of the css styles on ‘#object’. Finally, we will use some incredibly simple jQuery to apply the class ‘.animate’ to the HTML element ‘#object’.
Step 1: Example HTML
For this example, we will keep things very simple. Lets create a wrapper element in which our animation will occur, and stick our ‘#object’ inside that wrapper. It might look something like this:
<div id="wrapper"> <div id="object"></div> </div>
Step 2: Example CSS
The CSS is really the most magical part of this whole process, which is pretty amazing considering how few lines of styles there are to pull it off! This little line is really all there is to it:
transition:all .3s;
So what do we have there? It is a CSS style that does a few pretty interesting things to the element it is applied to. First it obviously tells the element to use transitions. Second, I am using ‘all’ to specify that all styles get transitions (you can change that, but in most cases I find all does the trick) and finally, it sets the duration of the transitions, in this case, to 0.3 seconds. Pretty simple!
So now let’s add this to our element. We will also use browser vendor prefixes just to be safe and maximize compatibility:
#object { -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; -webkit-transition:all .3s; transition:all .3s; }
Now lets give our ‘#wrapper’ and ‘#object’ some additional styles to get everything set up. In this case we are using absolute positioning just to make everything simple, but this is not necessary. We also give our ‘#object’ a color and our ‘#wrapper’ a border so we can see how our objects interact. Here is what our CSS will look like now:
#wrapper { width:400px; height:400px; 1px solid #000000; } #object { position:absolute; left:0px; top:20px; width:50px; height:50px; background-color:#000000; }
Now we have to create the CSS class that will be the catalyst for our animation. In this example, we will just move ‘#object’ from the left to the right. Here is what our CSS will look like with this new class:
#object.animate { left:200px; }
Pretty simple huh? Also notice that we attached the class directly to our object so we can reuse animate if we want depending on what we want to animate.
Step 3: The jQuery
Now all we have to do is get our class on our object. Make sure you are loading the jQuery library before this code will work. This line will add the animate class to our HTML element:
<script type="text/javascript" > jQuery(document).ready(function) { $('#object').addClass('animate'); }); </script>
That’s it! Go try it out and see what happens.
This is a very simple way to animate HTML elements with minimal code. Also notice that this particular example will animate the elements immediately when the page loads. You can of course use conditionals and event handlers to fire the animations as well, for example if a button is clicked.