看一下这个。This fiddle应该非常准确：

.quadrat {
  width: 50px;
  height: 50px;
  -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Safari 4+ */
  -moz-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Fx 5+ */
  -o-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Opera 12+ */
  animation: NAME-YOUR-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%, 49% {
    background-color: rgb(117, 209, 63);
    border: 3px solid #e50000;
  }
  50%, 100% {
    background-color: #e50000;
    border: 3px solid rgb(117, 209, 63);
  }
}

<div class="quadrat"></div>

很难猜出你想要的行为是什么，但有几点值得注意：

• 您不必使用重复的关键帧和 * 非常接近的百分比 * 来实现"反弹"：只需使用animation-direction: alternate;。
• 如果要完全跳过渐变，可以使用animation-timing-function:step-end（或steps(1,end);，但必须将"目标"状态移动到"中间"关键帧）。
• 或者你可以使用非常陡峭的贝塞尔曲线，比如cubic-bezier(.8,0,.2,1)或1,0,0,1--在短时间内，它与离散状态几乎没有区别。

@keyframes anim-half {
  50% {
    background-color: #e50000;
    border-color: #75D13F;
    border-right-width: 4.8em;
  }
}

@keyframes anim {
  to {
    background-color: #e50000;
    border-color: #75D13F;
    border-right-width: 4.8em;
  }
}

p {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-color: #75d13f;
  border: .2em solid #e50000;
}

/* just some fancyness */
p { border-style: solid; color: #fff; text-shadow: 0 0 3px #000; margin: 0 0 0.5em 0; }
p::after { content: attr(style); white-space: pre-wrap; }

<p style="animation-name: anim-half;
animation-timing-function: step-end;"></p>

<p style="animation-name: anim;
animation-timing-function: cubic-bezier(1,0,0,1);"></p>

<p style="/* linear reference */
animation-name: anim;
animation-timing-function: linear;"></p>

对前一位朋友已经提供的代码进行优化

.blink {
    animation-duration: 0.5s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: linear;
}
.blink-default {animation-name: anim-default;}
.blink-primary {animation-name: anim-primary;}
.blink-success {animation-name: anim-success;}
.blink-info {animation-name: anim-info;}
.blink-warning {animation-name: anim-warning;}
.blink-danger {animation-name: anim-danger;}

@keyframes anim-default {
    to {color: #333;background-color: #fff;}
}
@keyframes anim-primary {
    to {color: #fff;background-color: #337ab7;}
}
@keyframes anim-success {
    to {color: #fff;background-color: #5cb85c;}
}
@keyframes anim-info {
    to {color: #fff;background-color: #5bc0de;}
}
@keyframes anim-warning {
    to {color: #fff;background-color: #f0ad4e;}
}
@keyframes anim-danger {
    to {color: #fff;background-color: #d9534f;}
}

<p class="blink blink-primary">example linear</p>