css状态之间的动画？

Question

我可以在悬停状态之间设置动画吗？

例如:

#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;

因此底部边界将从0上升到25px.

我不确定这是否可以用CSS,或者我是否必须使用jQuery？

Answer 1

您可以使用CSS3过渡,但目前它们的支持并不是那么好:

#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;
}

语法是: element time easing

这是一个小提琴