Posted on by & filed under Content - Highlights and Reviews, Web Development.

There used to be a time where websites were still — not animated pieces of text and images. Those times are obviously long gone. Interactions and animations were first introduced with the introduction of JavaScript, and eventually became big when plugins like Java Applets or Adobe Flash came on the scene.

Now, years later, we don’t have to rely on plugins anymore. While many sites are highly interactive, this may not always be practical or necessary when you don’t want big fancy animations (e.g. where stuff just flies in and out everywhere). Many sites just need a little bit of animation that helps make it look fluid and engaging without distracting the user.

That’s where CSS transitions come in. CSS is not just a language to define the style and look of a website, it can also be used to define motion of almost any kind. Although CSS may not be best suited for creating complex, consecutive animations, in my opinion, it can come in very handy for generating small, simple effects.

All animations are defined just as any other CSS tag meaning a key-value-pair. You can define what properties should be animated over what time span. Appropriately, when you change the property, CSS won’t function to immediately change, but instead, smoothly interpolate the value over time.

As an example, let’s create a list in HTML.

Say, for example, we want to create an animation such that when the mouse hovers over one of the links, the link moves slightly to the right–-we don’t want it to jump, but rather transition just a few pixels over in that direction.

In order to be able to move the A-tag to the left and right we set the position and the left value:

This does not change the links look at all so far. Next, apply the transitions:

Those two lines define that whenever the left property is changed it will smoothly transition over 0.2 seconds.

In the last step, we apply a hover style:

And that will do the trick! In specific cases, some browsers will need a prefix, so you’ll have to define the transitions multiple times, like this:

You can also transition multiple attributes over different times. For instance, transition left and opacity over 0.2 and 0.5 seconds:

As you can see, with only a few extra lines, you can make the site much more interactive. When used correctly, these small transitions can have a huge impact.

This was just a brief introduction to what you can do with CSS transitions. Check out Mozilla MDN ( for more details.

Safari Books Online has the content you need

Check out these JavaScript books available from Safari Books Online:

HTML5 Games Most Wanted: Build the Best HTML5 Games gathers the top HTML5 games developers and reveals the passion they all share for creating and coding great games. You’ll learn programming tips, tricks, and optimization techniques alongside real-world code examples that you can use in your own projects. You won’t just make games—you’ll make great games.
WebGL: Up and Running is a quick introduction to WebGL, the new standard for 3D rendering on the web. With WebGL, web developers can create games animations, data visualizations, product displays, and more using JavaScript, a web browser, and a standard web technology stack. If you’re familiar with JavaScript, this concise book will help you gain a working knowledge of WebGL through clear and simple examples.
Flash Professional CS5 is such a powerful program that it can seem overwhelming to new or occasional users. With Flash Professional CS5 Visual QuickStart Guide, readers get a solid grounding in the fundamentals of the most recent version of the software. Highlights include working with new-style text in the text-layout framework (practically a mini-page layout program inside Flash), working with the new Color panel and other updated interface features, a look at the deco tool’s expanded pattern set, plus creating ActionScript using Flash’s improved automatic-code-completion features and code snippets.

About this author

Mathias Paumgarten, co-author of HTML5 Games Most Wanted, is a web developer who focuses on front-end and interaction development. Starting with a background in Flash development, he now focuses mainly on JavaScript. He found his passion for the web and code-based animation at a very young age and made his way from a small town in Austria all the way to New York City where he currently works for Firstborn Multimedia as a Creative Developer. Part of his work can be found at and

Tags: CSS, Javascript, Transitions,

Comments are closed.