Blinking background color animation

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>

Hard to guess what is your desired behaviour, but few notes:

  • You do not have to use duplicate keyframes and very close percentages to achieve "bouncing": just use animation-direction: alternate;.
  • If you want to skip gradual transition completely, you can use animation-timing-function: step-end (or steps(1,end); but you have to move your "target" state to the "middle" keyframe).
  • Or you can make transition very quick using very steep bézier curve, such as cubic-bezier(.8,0,.2,1) or 1,0,0,1 - with short duration it is quite indistinguishable from discrete states.

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); }
<p style="animation-timing-function: step-end; animation-name: anim-half;"></p>
<p style="animation-timing-function: cubic-bezier(1,0,0,1); animation-name: anim;"></p>
<p style="animation-timing-function: linear; animation-name: anim; /* for reference */"></p>

Tags:

Css

Recent Posts