CSS3 Transition All animation effect

So I tend to use this one alot because I might be during a shit load of hover states with different properties

 

div#magicbar
{
background-color:blue;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

div#magicbar:hover
{
opacity:0.7;
background-color:green;
border:10px solid black;
}

When I hover over this div with the class of sidebar, I want it to change to green, fade the opacity and a solid black color around it.

 

so keep  mind that the transtion all property is resource intensive compared to just changing one style like the background color. In that case, instead of
the word "all", change it to background-color and you can be more exact on what you are trying to change. The list goes on and on about css3 animation. I've worked on few short sidescroller stories using a combination of JQuery and CSS3 to show effects. As far the word "ease", they have other ones like Linear, ease-in, ease-out, I think you can figure what they mean, but ease-in, will ease in slowly. Ease will ease in and out.  Sorry for this is a short tutorial. I'll have more in the future,  

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.