Home /css /Using CSS Transitions the Easy Way /

Using CSS Transitions the Easy Way

2:17 am, April 23, 2017

Original Post Date: 12:20 am, August 12, 2014

You know im always looking for the easy way to do things! well here is the short code to apply css transitions. Was just testing this one in chrome and i dont think the one liner works correctly. So still might have to use the four lines for a while at the bottom of this page. Although i was testing it with a gradient background so, it might just be because my browser cant render gradients and a half second of transition at the same time.

And here is the shorter version of this code.

transition: 0.5s;


Want to apply transitions to everything on the page? also quite easy.  This will make everything transition from one state to another.

* {
transition: 0.5s;
}


Here is the code, i have highlighted the transitions: (I have also removed the comments to save a bit of space.. )

.transition { 
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

An Example

See the Pen Rounded Button with Gradient by Luke (@kruxor) on CodePen.



Here is a link to the demo download