Click here to Skip to main content
14,212,087 members
Click here to Skip to main content
Technical Blog
Posted 17 Mar 2016


5 bookmarked

CSS Transitions Explained

Rate this:
3.14 (15 votes)
Please Sign up or sign in to vote.
3.14 (15 votes)
24 Mar 2016     CPOL    
CSS transitions explained

CSS Transitions Explained

As programmers, we like to think in “steps.” Do this, then do that. When X happens, do Y. At least if we’re not writing functional-style code, anyway ;)

So when you need to animate some element on a web page, the natural first thought is to think of it in terms of cause and effect - when the user hovers over this button, then animate it enlarging slightly.

Now, if you’ve tried to actually do this with the CSS transition property, you know that’s not how it works. CSS transitions are declarative. You tell the browser what you want, and it takes care of the rest.

This clashes with the imperative, step-based nature of programming. When does the transition happen? How do I decide what gets animated?

Somehow, despite all the tutorials I had read, I missed one very critical thing about how CSS transitions work. The key is that you are telling the browser,

"Whenever this property changes, apply that change slowly."

The property transition: width 2s says “when the width changes, animate it over the course of 2 seconds.”

transition: all 0.5s says “when anything changes, spend 0.5s doing it.”

So if you want to round the corners of a button when it’s hovered?

/* Initial state: border-radius is 0.
 * When border-radius changes, it'll take 0.3s
 * instead of happening immediately */
button {
	border-radius: 0;
	transition: border-radius 0.3s;
	/* any other styles you need ... */
button:hover {
	border-radius: 20px;

Unfortunately, CodeProject strips out <style> tags, so the demo button won't work here. Check it out in all its working glory in the original post!

I hope this helped clear up the “how” behind CSS transitions!

CSS Transitions Explained was originally published by Dave Ceddia at Angularity on March 16, 2016.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Dave Ceddia
United States United States
Dave is a Software Engineer in the Boston area and writes about AngularJS and other JavaScript things over at

Comments and Discussions

GeneralMy vote of 5 Pin
james983723-Mar-16 9:07
memberjames983723-Mar-16 9:07 
SuggestionFull working code Pin
Jan Zumwalt21-Mar-16 15:48
memberJan Zumwalt21-Mar-16 15:48 
GeneralRe: Full working code Pin
Dave Ceddia24-Mar-16 7:51
memberDave Ceddia24-Mar-16 7:51 
GeneralNice concise & helpful post, thanks, but, Pin
JAV2420-Mar-16 7:32
memberJAV2420-Mar-16 7:32 
GeneralRe: Nice concise & helpful post, thanks, but, Pin
osoviejo23-Mar-16 18:46
memberosoviejo23-Mar-16 18:46 
GeneralRe: Nice concise & helpful post, thanks, but, Pin
Dave Ceddia24-Mar-16 7:50
memberDave Ceddia24-Mar-16 7:50 
GeneralMy vote of 5 Pin
Wayne Stewart_18-Mar-16 8:02
memberWayne Stewart_18-Mar-16 8:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Layout: fixed | fluid

Article Copyright 2016 by Dave Ceddia
Everything else Copyright © CodeProject, 1999-2019

Server Web01
Version 2.8.190619.2