CODEWITHSUNDEEP
jqueryeasing
Erik
Erik

Reputation: 5791

How to use fade EASING with my existing code / css? Is it possible?

I have never done easing before and I'm trying to find out if its possible with my existing code. I already have css a:hover. How do I use fadein easing with my existing code?

#rbox a {height:48px;
         line-height:48px;
         padding-left:17px;
         padding-right:17px;
         float:left;
         color:#FFF;
         background:#c04747;
         font-size:17px
        }

#rbox a:hover {background:#6C6C6C;}



<div id="rbox"> <a href="mtf.com">Meet the Founder</a></div>

Upvotes: 0

Views: 234

Answers (2)

elclanrs
elclanrs

Reputation: 94101

If you mean css3 transitions this should do:

#rbox a {
  ...
  transition: all .5s ease-in-out;
}

Make sure to add the vendor prefixes if you want support for all browsers.

Upvotes: 0

flagoworld
flagoworld

Reputation: 3194

One thing you may want to note about CSS3 easing is that older browsers probably don't support it. You can try jQuery in that case.

Meanwhile, here is a wonderful tool for generating CSS3 easing rules.

http://matthewlein.com/ceaser/

Your code may look like this, if I am understanding it correctly:

#rbox a:hover
{
    background:#6C6C6C;
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

Upvotes: 1

Related Questions