animate between css states?

Question

Can I animate between hover states?

Eg:

#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;

So the bottom border would rise up from 0 to 25px.

I'm not sure if this is possible with CSS, or if I'd have to use jQuery?

Answer 1

You can use CSS3 transitions, but their support isn't that great at the moment:

#menu ul li a {
    -webkit-transition: border .5s ease-in-out;
    -moz-transition: border .5s ease-in-out;
    -o-transition: border .5s ease-in-out;
    transition: border .5s ease-in-out;
}

The syntax is: element time easing

Here's a Fiddle

Answer 2

Yep, just add a CSS transition.

in #menu ul li a {

just add:

-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;

You don't need an ms one by the way, IE10 doesn't use prefixes.

For loads more info, have a look at http://css3.bradshawenterprises.com/