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

User · Answer

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

User · Answer

If you need the transition to run infinitely  try the below example    x000D   x000D   box   x000D    position  relative  x000D    width  100px  x000D    height  100px  x000D    background-color  gray  x000D    border  5px solid black  x000D    display  block  x000D    x000D   x000D   box hover   x000D    border-color  red  x000D    animation-name  flash border  x000D    animation-duration  2s  x000D    animation-timing-function  linear  x000D    animation-iteration-count  infinite  x000D    -webkit-animation-name  flash border  x000D    -webkit-animation-duration  2s  x000D    -webkit-animation-timing-function  linear  x000D    -webkit-animation-iteration-count  infinite  x000D    -moz-animation-name  flash border  x000D    -moz-animation-duration  2s  x000D    -moz-animation-timing-function  linear  x000D    -moz-animation-iteration-count  infinite  x000D    x000D   x000D   keyframes flash border   x000D    0    x000D      border-color  red  x000D      x000D    50    x000D      border-color  black  x000D      x000D    100    x000D      border-color  red  x000D      x000D    x000D   x000D   -webkit-keyframes flash border   x000D    0    x000D      border-color  red  x000D      x000D    50    x000D      border-color  black  x000D      x000D    100    x000D      border-color  red  x000D      x000D    x000D   x000D   -moz-keyframes flash border   x000D    0    x000D      border-color  red  x000D      x000D    50    x000D      border-color  black  x000D      x000D    100    x000D      border-color  red  x000D      x000D    x000D   lt div id  box  gt roll over me lt  div gt  x000D   x000D   x000D

User · Answer

You can try this also     x000D   x000D  button     background  none    border  0    box-sizing  border-box    margin  1em    padding  1em 2em    box-shadow  inset 0 0 0 2px  f45e61    color   f45e61    font-size  inherit    font-weight  700    vertical-align  middle    position  relative    button  before  button  after     box-sizing  inherit    content        position  absolute    width  100     height  100       draw     -webkit-transition  color 0 25s    transition  color 0 25s     draw  before   draw  after     border  2px solid transparent    width  0    height  0     draw  before     top  0    left  0     draw  after     bottom  0    right  0     draw hover     color   60daaa     draw hover  before   draw hover  after     width  100     height  100      draw hover  before     border-top-color   60daaa    border-right-color   60daaa    -webkit-transition  width 0 25s ease-out  height 0 25s ease-out 0 25s    transition  width 0 25s ease-out  height 0 25s ease-out 0 25s     draw hover  after     border-bottom-color   60daaa    border-left-color   60daaa    -webkit-transition  border-color 0s ease-out 0 5s  width 0 25s ease-out 0 5s  height 0 25s ease-out 0 75s    transition  border-color 0s ease-out 0 5s  width 0 25s ease-out 0 5s  height 0 25s ease-out 0 75s    x000D   lt section class  buttons  gt     lt button class  draw  gt Draw lt  button gt   lt  section gt  x000D   x000D   x000D

[css] CSS3 animate border color

Examples related to css