css - CSS3 animate border color

Question

I want to animate borders of an element using CSS3, whether it's in hover state or normal state. Can someone provide me a code snippet for this or can guide?

I can do this using jQuery but looking for some pure CSS3 solution.

question from:https://stackoverflow.com/questions/9476923/css3-animate-border-color

Answer 1

You can use a CSS3 transition for this. Have a look at this example:

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

Here is the main code:

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