无限边框颜色循环

Question

我想要这种效果，但不是在整个身体背景上，而是在我的一个 div 的边界上。( http://jsfiddle.net/ANMPt/ )

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
}

我如何只定位边界？

或者：如果有人有更好的解决方案来在 CSS 或 JavaScript 中无限循环更改边框颜色：我全神贯注:-)

谢谢！

Answer 1

您正在将其应用于body! 为div

div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

小提琴：http : //jsfiddle.net/praveenscience/ANMPt/160/

但是，如果你说它是为了边界，那就border-color不是为了background！

@-webkit-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-moz-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-ms-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
     border: 2px solid;
}

小提琴：http : //jsfiddle.net/praveenscience/ANMPt/167/