CSS Animation How To Tutorial

So as the author of CSS3 Animate It I have a good background in CSS animation. Before CSS3 was released you would have to resort to using JS for animation. The problem with this is it used the CPU and not the GPU to animate elements. As a result of this, the performance was often pretty bad.

Nowadays things are much more slick and CSS has a full library of tools available to create anything from a simple fade in, to complex animations.

 Simple CSS Transition Animations

So the easiest way to animate elements is to use the “transition” property. Essentially what it will do is transition from the base class to the new class or event.

So for example if we had a box with a width of 100px and we wanted to change it to 300px on hover then we would have the width on the base box class set to 100px with “transition: width 2s”, then the :hover would have the width set to 300px. This will animate the width from 100px to 300px over 2 seconds.

We can see that “transition” takes 2 parameters. The first is basically telling it which property to animate. In this case we have it set to animate the width but we could set it to “all” which would transition everything that changes from one class to another. The second parameter is just the duration in which the animation takes to complete, which in this case is 2 seconds.

CSS:

HTML

Multiple Transition Properties

So as well as being able to set “all” for the first “transition” parameter, you can also define multiple comma separated transitions with their own durations like so.

Transition Delay

You can also delay an animation before it begins by using the “transition-delay”.

CSS Keyframe Animations

So if you want a bit more control over your animations then you will want to look at using keyframe animations. By using keyframe animations you are able to control and change an animation at any point during the effect.

We can re-create what we did with the simple transitions with keyframe animations like so.

So we have declared our keyframes and called them “example”, so now we can reference our keyframes from our “.box:hover” class using “animation-name: example;”.

We also need to set the animation duration and fill mode on the “.box” class which is the original state. We can do this using “animation-duration: 2s;” and “animation-fill-mode:both;”.

Adding a CSS Bounce Animation

So the whole point in using keyframes is so you can do more complicated animations, so let’s add a little bounce to our animation.

So we can add another keyframe to our keyframe list at 75%. We will make it go to 400px before returning to 300px at 100%.

Hardware Accelerated Animations

Moving Elements with CSS Animation

So you could add your keyframes as before and change the margins or the position attributes. However, the issue with this is that it won’t use hardware acceleration.

In order to take advantage of hardware acceleration with CSS animations is to use “transform: translateY(400px);” and “transform: translateX(400px);”.

So let’s give an example where an element bounces into view using the “transform” property.

Animating Box X and Y

So if you want to translate both X and Y at the same time then instead of using “transform: translateY(400px);” and “transform: translateX(400px);”, you will want to use “transform: translate(400px, 400px);”.

Scaling Elements with CSS Animation

So if you want to have an element grow in or out then you can use “transform: scale(n); “. Again this will utilize hardware acceleration on the CSS animation rather than using Width and Height which won’t.

Using “scale” also won’t interact with other elements on the page. This means you don’t have to have absolutely positioned elements in order to alter the size of an element with CSS animation.

So one wee thing you will spot here is that we have also added “transform: scale(0.2); ”  to the “.box” class. The reason for this is you want your starting point to be part of the main class so that it doesn’t pop from one state to another as the page loads.

You may also like...

3 Responses

  1. Sookiepi Gonfart says:

    i do this but it not work. sanjay my friend have the same thing happn,

    • Jack says:

      Hi Sookiepi, Could you expand on the issue you are having? Perhaps a link to the page you are having trouble with?

  2. Jina says:

    Its good article, you shared very important point here. I will definitely try this tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *