Javascript 我怎样才能让边框无限期地切换颜色？

我试图让文本下方的边框，当用户在页面上时，会自动产生一种浅灰色和深灰色的脉冲。我试着在CSS中使用webkit动画，但我没有太多的经验，而且它似乎不起作用。这是我的密码：

代码：

$（文档）.ready（函数（）{
var例外=[“公牛”、“押韵”、“旋转”、“眩目”、“捏紧”、“氧气”、“卷须”、“精确”、“一致”、“组合”、“吞咽”、“微笑”，
“镜子”、“树屋”、“工程”、“缩小”、“大笑”、“坠落”、“昏迷”、“破裂”、“皮肤”、“不合时宜”
];
$（“p”）。每个（函数（）{//用于所有段落
var txt=$（this）.text（）//获取文本，将其拆分，必要时添加跨距，然后将其重新组合在一起
.拆分（“”）
.map（函数（x）{
返回异常。包括（x.toLowerCase（））？x:“+x+”
}).加入（“”）；
$（this.html（txt）；//将文本设置为新处理的文本
}).on（“鼠标悬停”，“悬停”，函数（）{
$（this）.addClass（“悬停”）；//将不透明度设置为100%
}).on（“mouseout”，“悬停”，函数（）{
$（this.attr（“类”，“不透明度”）；//将不透明度设置为0%，删除“悬停”事件
});
});
img{
宽度：3%；
高度：3%不透明度：0.5；
}
.悬停{
不透明度：0；
}
.盘旋{
不透明度：1；
}
跨度{
过渡：不透明度0.5s；
不透明度：0；
}
p{
游标：默认值；
线高：200%；
边框底部：实心；
边框颜色：rgb（50,50,50）；
颜色：白色；
}
@-webkit关键帧p{
0% {
边框颜色：红色；
}
50% {
边框颜色：蓝色；
}
100% {
边框颜色：绿色；
}
}
.故事{
-webkit动画：P10S无限交替；
}



知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

CSS规则
.style
上没有设置
边框。动画仅应用于其所在元素的属性。您必须在
p
元素（实际上有边框）上设置动画，或者在
.story
元素中添加边框


p{/*p是有边框的元素，.story没有边框*/
游标：默认值；
线高：200%；
边框底部：实心；
边框颜色：rgb（50,50,50）；
颜色：白色；
}
@-webkit关键帧p{
0%{边框颜色：红色；}
50%{边框颜色：蓝色；}
100%{边框颜色：绿色；}
}
p{/*在具有边框的元素p上设置动画*/
-webkit动画：P10S无限交替；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

我已经更新了你的小提琴，让它无限闪烁。
我已将您的代码更改为：

    img {
  width: 3%;
  height: 3% opacity: 0.5;
}

.hover {
  opacity: 0;
}

.hovering {
  opacity: 1;
}

span {
  transition: opacity 0.5s;
  opacity: 0;
}

p {
  cursor: default;
  line-height: 200%;
  border-bottom: solid;
  border-color: rgb(50, 50, 50);
  color: white;
}

.blink_me p{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; border-color:red;}
    50% { opacity: 0.0; border-color:blue;}
    100% { opacity: 1.0; border-color:green;}
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; border-color:red;}
    50% { opacity: 0.0; border-color:blue;}
    100% { opacity: 1.0; border-color:green;}
}

@keyframes blinker {  
    0% { opacity: 1.0; border:red}
    50% { opacity: 0.0; border-color:blue}
    100% { opacity: 1.0; border-color:green}
}

类blink_me p可以应用于悬停，并且只有在鼠标悬停时才有blink

请参阅。还要注意，要使动画在跨浏览器中正常工作，必须定义特定于浏览器的css。提供的一个不适用于internet explorer。为此，您必须用javascript编写

这是一个典型的css黑客。尝试伪元素：

p{
位置：相对位置；
}
p:以前{
内容：''；
位置：绝对位置；
底部：-1px；
宽度：100%；
高度：1px；
动画：bdColor 1s放松无限交替；
}
@关键帧bdColor{
0%{背景色：红色；}
50%{背景色：蓝色；}
100%{背景色：绿色；}
}
请做一把小提琴/plunkr/pen。这里有一个错误
。应该是
@jmargolisvt Ok我加了一把小提琴。大部分都不用担心。边界是主要问题。很好。你这里有一些有用的答案。。。你可能应该接受其中一个