/ home / css / using css transitions the easy way /

Using CSS Transitions the Easy Way

11:14 pm, February 25, 2016 784 267 1.3 @ 200 wpmrate up KruXoR source

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

11:14 pm, February 25, 2016 784 267 source



Add Report



This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..



Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links