So I tend to use this one a lot for desktops because I like it when the hover state changes.
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;
}
so keep mind that the transition 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,