闪烁背景颜色动画

我正在尝试创建一些闪烁的元素动画.它应该持续一秒半 - 它有红色边框和绿色BG,另外半秒绿色边框和红色BG.颜色的变化应该是即时的.

我试过这样的:

0, 49%, 99%, 100% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
49%, 50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}

它有点奏效,但颜色过渡非常缓慢.我也尝试了这个:

0%, 49% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
49%, 50% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}
50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}
99%, 100% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}

还有这个:

0%, 50% {
    background-color: rgb(117,209,63);
    border: 3px solid #e50000;
}
50%, 99% {
    background-color: #e50000;
    border: 3px solid rgb(117,209,63);
}

但没有任何工作按预期......请帮忙吗？

看看这个,对我来说,这个小提琴看起来非常准确:

.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);
  }
}

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

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

@keyframes anim-half {
  50% {
    background-color: #e50000;
    border-color: #75D13F;
    border-right-width: 4.8em;
  }
}
/* 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); }