关于CSS3 动画transition的一个问题

问题描述

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 连接上时，颜色是渐进变化的，移开鼠标时也会有一个颜色渐变的效果，请问是怎样做到的。

问题解答

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; }}回答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;这一行中定义了指定两个属性的动画：text-shadow跟color，你说的颜色渐进就是color 500ms ease-in 0m；可以理解为：执行变化的属性：color；动画持续时间：500ms；时间函数（定义了执行动画的方式）：ease-in（由慢到快）；延迟时间：0m；