CSS3 动画边框颜色

Question

我想使用 CSS3 为元素的边框设置动画，无论它处于悬停状态还是正常状态。有人可以为此提供代码片段或指导吗？

我可以使用 jQuery 做到这一点，但正在寻找一些纯 CSS3 解决方案。

Answer 1

您可以为此使用 CSS3 transition。看看这个例子:

http://jsfiddle.net/ujDkf/1/

主要代码如下:

#box {
  position : relative;
  width : 100px;
  height : 100px;
  background-color : gray;
  border : 5px solid black;
  -webkit-transition : border 500ms ease-out;
  -moz-transition : border 500ms ease-out;
  -o-transition : border 500ms ease-out;
  transition : border 500ms ease-out;
}

#box:hover {
   border : 10px solid red;   
}