Blinking background color animation

Question

I'm trying to create sort of blinking element animation. It should last one second - half second it has red border and green BG, and another half second green border and red BG. The change of colors should be just about immediate.

I tried it like this:

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

It sort of worked, but the color transition was very slow. I tried also this:

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

and this:

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

But nothing worked as expected... Any help, please?

Answer 1

Take a look at this. This fiddle should be pretty accurate:

.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>