Click here to Skip to main content
13,631,619 members
Click here to Skip to main content
Add your own
alternative version

Stats

12.4K views
5 bookmarked
Posted 17 Mar 2016
Licenced CPOL

CSS Transitions Explained

, 24 Mar 2016
Rate this:
Please Sign up or sign in to vote.
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.

 

License

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

Share

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 daveceddia.com

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
David James23-Mar-16 9:07
memberDavid James23-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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180712.1 | Last Updated 24 Mar 2016
Article Copyright 2016 by Dave Ceddia
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid