Learn how Crafter’s Git-based content management system is reinventing modern digital experiences.

From the beginning. 1987. The year when GIF was born

It was 1987 when the GIF format was introduced by the CompuServe company. After that, in 1989, animation support was added as one of the features. So, GIF became some kind of a standard in web animation. If somebody wanted to create an animated website back in the 90's, GIF was probably the first thing that they were thinking about. Here's an example of how it looked like back then. Seems like some things always remain the same, right?

This is not so hard to add some GIF animation to your page. For example, we want our link's background to change into an animated GIF image when we move the mouse cursor over it. We can use the :hover pseudo-class for that:

a:hover {
background-image: url(giphy.gif);
}

The background-image property is useful when you want to add some animation to your page background. Let's try to create a retro looking web page using this knowledge. You won't believe your eyes when you see how 90's it is! And we don't even need to work hard to do so. It's always retro when you use GIFs!

Done. This is all you need to create your own 90's style homemade Burger King website:

These burgers are animated. And the links, too:

There's not so much we can do with GIFs, to be honest. So, let's continue our time travel.

1995. New star rising. JavaScript appearance

JavaScript brought more interactivity into web applications. JavaScript frameworks are really handy, if you want to make some complex app faster. Some kind of a standard among them is jQuery. It contains a lot of useful functions which can help you manipulate the content almost any way you want. Some animation functions are available as well and we'll see how they work soon after. There are also a lot of animation frameworks out there. We'll use Animo.js as an example to see how they work.

.animate() it! jQuery animation capabilities

The main jQuery animation function is .animate(). It's easy to remember that name, isn't it? Syntax is rather easy too:

Just copy and paste it and you'll see. And remember to get the framework source code before trying.

Usually there's no need to use all the function's parameters. properties defines the CSS properties you want to change. duration sets the duration in milliseconds. We also used another .animate() function as a complete property. It will start working right after the main animate() function completes.

Let's examine it in practical example now. Here's the example of our site:

There is no need to add any content, because what we are interested in is that MENU button on the top left. And we want to animate it.

Here's how it will look like after we push the MENU button:

What we can't show you is how our side-menu is sliding smoothly from the left. You will be able to test it by yourself after we complete our project. And one more thing before we started: notice how background changed after we pushed the MENU button. It moved to the right, just like the side-menu.

Here's the deal. What we have here is the <div id="menu"></div> section which contains all the stuff we want our menu to contain. Link with the menu-close class will close our menu in case we can't take it anymore. First list within the <div class="menu-first"></div> is our basic menu. It appears after the MENU button is being pushed. All the menus inside of it are useless and we need them just as an example. All, but not the first one with the class-name sub-menu. It will open the second level menu with class-name menu-second. Second level menu is hidden by default. We'll show you how to hide it using CSS. What's interesting about the second level menu is the link with the back-button class. It will return us to the basic menu. We'll also add some effects for you to be entertained while main menu changes to sub-menu and vice versa. We also need the <div class="pointer"> element to point forward or backward.

Notice how we hide the second level menu: we used the display: hidden property for that. By default, menu is placed 285 pixels to the left. What we need to do is move it 285 to the right with the animate() function. We also need to add the position: relative property to all the elements we want to move. Now, the animation!

First, prepare your app.js file:

js
var main = function() {
};
$(document).ready(main);

Now we will be adding the functions we need into the main function step by step. First of all, we need our menu to appear after we press the MENU button:

What happened here? We changed the left property for <div id=menu></div> element. It changes it's position from the original left: -285px to the left: 0px and it will take 200 milliseconds to do it. All the content inside the <body></body> tags will also move. Why? Because it's prettier that way, that's why.

The menu-close button will hide the menu. We talked about it earlier. The code is pretty much the same, but now we want our menu to disappear:

These are not all the effects functions jQuery allows you to use. There are also show(), hide(), slideUp(), slideDown(), slideToggle(), and some others. You cah check the Effects page to see them all.

We will now continue with the framework that specializes on the animation effects above all.

Animation frameworks. Animo.js

Animo.js is basically a set of animation functions. It's better for you to check the home page. Pretty demos are waiting for you there. We'll use some of the available effects to create a good-looking presentation page. It will contain some images with different animation effects.

To make it look more fashionable we moved our images from their original positions to the right or to the left using the position: relative property to make them free and the left: 60px property, for example, to move them to the right. Notice the <div class="two-images"> section. It's empty by default. We made our image-two and image-three invisible. They will appear inside this <div> when we want to:

Before:

After:

We'll use the .scrollTop() function to determine when the animation should start. This is rather primitive way to create a scroll-based animation. Better check some particular frameworks, which were created to handle the scrolling process.

We'll use the ready() function to prepare our images right after the document loading completes. The scroll() function will handle the scrolling process. It will determine when animation should start. The .scrollTop() function will help us. It returns the number of pixels that are hidden from view above the scrollable area. If you want to create a web site with responsive design, you should pay some respect to the page's width.

Let's now add the tada effect to the first image. Add this code to your scroll() function:

First, we need to change the display property to the block value to make our images visible. Then we run two types of animation: fadeInLeft and fadeInRigth to make them appear from nowhere. Some kind of a surprise for possible visitors!

Next animation effect is rotation. And now we'll prepare our images right after the whole document is loaded:

It works pretty much the same as the .animate() function in jQuery works. We define the animation behavior with @keyframes and then use the animation-name and animaion-duration properties to apply our animation to the <div> we want to animate.

You can run your animation step-by-step using percentage. It works like this:

As you can see, this code repeats the simple .animate() example we made to move our <div> with jQuery.

You can also set a delay for animation to start with the animation-delay and -webkit-animation-delay properties. The animation-iteration-count and -webkit-animation-iteration-count properties set the number of times an animation should repeat. You can use an integer or an infinite value to run your animations infinitely until, I don't know, the sun collapses. You can use animation-direction and -webkit-animation-direction in case you want to run your animation in reverse, for example. Use the reverse value for that purpose. With the alternate value set up, animation will run forward, then backward, then forward. Then? Backward again, that's right. The last properties we want to tell you about are the animation-timing-function and -webkit-animation-timing-function properties. Possible values are:

All the properties are familiar to us, so there's nothing to be afraid of. Except for the animation-fill-mode property maybe. This is something new. We need it to be sure that we will remain at the last keyframe after animation is done. In this case, the last keyframe is a combination of two properties: opacity: 1 and left: 40px. Without this last property the <div></div> element will disappear again.

It works. But you should always keep in mind how to make your code work well in different browsers.

Enjoy your CSS

Creation of css animations can be a boring and lengthy process of adding necessary css styles and vendor prefixes (especially for different browsers). This problem can be partly settled thanks to the use of css generators. You've probably used some of them when you needed to create a cross-browser gradient or a box shadow. Some css generators can do not only this but also animations, like, for example, EnjoyCSS develped by a small software development company.

Here's a gallery of available templates.

Let's take a look at Transition.

It contains an example of hover controlled animation. There are interactive "Before" and "After" views. You can use this menu on the right to set proper CSS values.

All you need to do after the values are defined is to choose the target browsers and EnjoyCSS will do all the work for you:

Conclusion

What's good about the CSS3 animation? First of all, it looks more natural comparing to frameworks. You don't ever need to download any source codes you need to use in case of frameworks. If you create a web page, you probably will work with styles. So, why not create some animations at the same time? They are hardware accelerated, which is not so important when you use them on your desktop. But it WILL BE if you decide to use your mobile browser. But, here's the bad side: you can't start your animations one after another since there is no callback functionality available with CSS3. Animations start right after the page loading completes or you can use the hover pseudo-class to trigger them. If you want to use event-oriented animation, you should use JavaScript or JavaScript frameworks. You can choose between big frameworks, which contain animation functions among the others, and animation-oriented frameworks such as Animo.js. By the way, CSS3 frameworks are available too. For example, Animate.css, which is used inside of Animo.js. CSS3 code generators will help you to finish your code faster. You are also free to use the GIF animation, if you want to. We won't judge you.