闪烁背景颜色动画

Question

我正在尝试创建一些闪烁的元素动画.它应该持续一秒半 - 它有红色边框和绿色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);
}

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

Answer 1

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

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

Answer 2

很难猜出你想要的行为是什么,但很少有笔记:

• 您不必使用重复的关键帧和非常接近的百分比来实现"弹跳":只需使用animation-direction: alternate;.
• 如果你想完全跳过逐渐过渡,你可以使用animation-timing-function: step-end(或者steps(1,end);你必须将你的"目标"状态移动到"中间"关键帧).
• 或者你可以使用非常陡峭的贝塞尔曲线非常快速地进行转换,例如cubic-bezier(.8,0,.2,1)或1,0,0,1- 在短时间内它与离散状态完全无法区分.

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>