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

If you need the transition to run infinitely, try the below example:

_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_

<div id="box">roll over me</div>

_x000D_

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

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