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/

Answer 2

动画border-color代替background：

@keyframes blink {
    0%   { border-color: red; }
    50%  { border-color: green;}
    100% { border-color: red; }
}
body {
    border: 15px solid;
    animation: blink 1s infinite;
}

^{某些浏览器可能需要供应商前缀}

Demo

Answer 3

http://jsfiddle.net/ANMPt/162/

将其更改为border-color。

            @-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; }
            }
            body{
                 -webkit-animation: blink 1s infinite;
                 -moz-animation:    blink 1s infinite;
                 -ms-animation:     blink 1s infinite;

                 border: 20px solid red;  /* cant animate border without a border... */

                 height: 200px; / * for illustration purpose */
            }

Answer 4

将其应用于正确的属性（border-color而不是background）和正确的元素（最好使用class选择器，因此效果可以是应用于任何元素而不仅仅是divs。

另外，请不要忘记使用（始终为最后一个）默认@keyframe语法而不是前缀语法。

Demo

HTML

<div class="animatedBorder"></div>

CSS

@-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; }
}
@keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}

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

div.animatedBorder{
    margin: 20px;
    width: 100px;
    height: 100px;
    border: 5px solid transparent;
}

Answer 5

@-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{
    border:solid 1px red;
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

Answer 6

将所有出现的background替换为border-color，然后在div元素而不是正文中使用它们。

您可能必须首先为div定义边框（如#000000 1px solid），以便为其设置动画。

Answer 7

http://jsfiddle.net/ANMPt/165/

您需要更改动画定义的样式：

    0%   { border-color:red; }
    50%  { border-color:green;}
    100% { border-color:red; }

为div定义边框：

#myDiv{
    height: 300px;
    width:300px;
    border-width:5px;
    border-style:solid;
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

Answer 8

FIX 动画border-color代替background

但是如果你需要将此效果添加到div

只需在div

中添加body即可

然后将css中的background更改为border-color属性

DEMO

@-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{
    border:2px solid;
    width:200px;
    height:200px;
     -webkit-animation: blink 1s infinite;
     -moz-animation:  blink 1s infinite;
     -ms-animation:   blink 1s infinite;
}

无限边框颜色循环

8 个答案:

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

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