关于CSS3 动画transition的一个问题

Question

a{
    color: #0088cc;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus{
        color: orange;
        text-decoration: none;
        -webkit-transition: color 250ms ease-in 0ms;
        -moz-transition: color 250ms ease-in 0ms;
        -ms-transition: color 250ms ease-in 0ms;
        -o-transition: color 250ms ease-in 0ms;
        transition:  color 250ms ease-in 0ms;
    }
}

在alloyteam blog看到的一个效果。就是鼠标移动到 a 连接上时，颜色是渐进变化的，移开鼠标时也会有一个颜色渐变的效果，请问是怎样做到的。

Answer 1

a{
    color: #0088cc;
    text-decoration: none;
    -webkit-transition: color 250ms ease-in 0ms;
    -moz-transition: color 250ms ease-in 0ms;
    -ms-transition: color 250ms ease-in 0ms;
    -o-transition: color 250ms ease-in 0ms;
    transition:  color 250ms ease-in 0ms;
    &:hover,
    &:active,
    &:focus{
        color: orange;
    }
}

Answer 2

a:link, a:visited, a:active {
text-decoration: none;
-webkit-transition: ...;
-moz-transition: ...;
-ms-transition: ...;
-o-transition: ...;
transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
}

transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
This line defines animations that specify two attributes: text-shadow and color. The color progression you are talking about is color 500ms ease-in 0m;
Can be understood as:
Attributes that perform changes: color;
Animation duration: 500ms;
Time function (defines the way to perform animation): ease-in (from slow to fast);
Delay time: 0m;