css, html5

So you want to animate the web, do you ?


Well, why on earth not. There are some very cool animation tools out there, your friend Mr.Google will fire hundreds of web pages of them at you if you but ask him. But, in my opinion, it’s always best to do things from first principles at least a couple of times, so you know what is going on under the hood.

Step 1: Planning

Without doubt the most important stage. Don’t just jump in and realise halfway through that you need to start adding DIV tags and swap classes around. Plan it on paper first in oeder to discover all of the elements required to attain the desired effect.

First, get your stacking order – remember you need to have position set in order to be able to use z-depths. HTML elements are positioned static by default and to use Z we need to change that to one of the other options, like relative. I tend to describe the effect in words with a mini sketch first to see what I want to happen on hover (or click, or whatever other action you want to start the animation – Javascript can easily set this off by adding the relevant class to your main tag)

Once I am happy with what I want on paper, I then draw out the layers separately and name them sensibly so as not to have conflicts. I don’t usually use id’s, just class names. The easiest way to accomplish the creation is to have a codepen open and once you are happy with the base component, clone it  so you now have two identical components sitting next to each other.

Starting with a base unit we need to turn the static component into it’s birth state, including any hidden elements, hiding them only when they are positioned at their start of animation and, once it is ready with all the relevant html elements and css attributes, clone the whole component and create a second one in HTML on the page, so the one on your left will be the static state and the one on the right will be the post-animated end. You should now have 2 identical components on the screen.

Now go to work on the css, first do a copy/paste of all the classes in your css for the second component and prefix the class names with XXX. Don’t forget to change the class names in the html too. Once complete we should be back to two identical components again.Next, start to move the elements around, hide and un-hide them and go nuts. We will usually activate the animation using a single top level attribute on one of the elements (:hover is best to start with) and then use this as the filter factor for all other classes. So if XXXtopClass is the top level item with the other classes below including <p> and <spans> and <div> tags, first remove the XXX from the name XXXtopClass and apply the attribute so we have topClass:hover The original component css is still there and so we have the two states. It won’t work yet because we haven’t linked this single class state change to our other XXX classes.

We next need to convert all the other elements for this action i.e. from .XXXlowerClassItems {} to topClass:hover .lowerClassItems {} and here is where our XXX comes in handy as we simply use Notepad to perform a search and replace on .XXX with “topClass:hover .” BINGO!

After replacing the css in codepen the experiment should now work correctly. The two states will switch between each other on mouse-over. All we need to do now is transition the animations. Now is a good time to go back to the HTML and you can discard the now useless second HTML element.

Let’s get things moving now

CSS3 Animations are all based on the transition, @keyframes and transform options within a class. We are going to only look at the transition and you can go off and play with the others when you want to step it up a notch. Note: Animations are not for free, just like a flash animation, they require quite heavy CPU or GPU processing and can turn your phone into a non-responsive brick if you have too much going on. Keep it simple.

For Transitions there is a short form, but here is the long one to make it clear:

    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;

The first line describes the property or properties that be be animated, the use of “all” here is very standard practice, however in the shortform by naming the attribute you can also have different easing, duration and delay for each animated attribute.

Next, we have the duration, the easing, start slow end fast etc. And finally the option for a delay. All times are in milliseconds, so 3500 = 3.5 seconds.

For the joy and wonders of cross browser compatibility we need to have -moz and -webkit versions. Most css pre-processors (LESS, SASS) will do this work for you but if manual then you need to make sure the animation is set for Mozilla and Safari. The example here is for safari browsers:

    -webkit-transition-property: width;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;

Next, we want to use these transitions with our example. You need to place the transition statement back in the base element class in order for it to know that if any of the properties on that element do change, they are going to transition and not just jump to the new state. So let’s use the short form now and create a base transition block:

    -webkit-transition: all 2s linear 1s; /* For Safari 3.1 to 6.0 */
    transition: all 2s linear 1s;

this is what we need to paste into those classes we wish to animate – the short form starts with the transition command and then we have properties (or all), then the duration, then the easing and finally a delay. Alos note I am using s here to denote seconds. Paste the block inside all the base classes and give it a whirl. All of your elements will now change between states in 2s with a delay of 1s. Now all you need to do is go and play with the durations, delays and easings to get the whole component behaving as you want.

I saw an effect that I love, what do I do? – The first thing to do is inspect the code. See what HTML elements are making up the component, use codepen to copy and paste it. Next, look at the style inspection panel and start copying and pasting from the style sheet. Another option is a chrome extension tool called snappysnippet. Or if the developer has minified their code, use http://unminify.com/

Here’s a codepen working example with some basic tags and animations that you can play with.

See the Pen DopeyDaisy by michael (@mkbatman) on CodePen.

Another example that is worth mentioning on this site is in the CLIENTS section. I added it quickly and it could use some refinement, but notice that the animations only occur as the page scrolls over them. This is using a block of javascript and jquery in order to wait until the scrolltop and page visible height includes the elements and then jquery forces a class name change which activates the animations. The animations only occur once for the code I have written but you could change that too. Finally, have a look at animate.css, this is a predefined library of effects you can use.