CSS 闪烁的背景颜色动画

Blinking background color animation

提问by Igal

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.

我正在尝试创建某种闪烁的元素动画。它应该持续一秒 - 半秒它有红色边框和绿色 BG，还有半秒绿色边框和红色 BG。颜色的变化应该是立即的。

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?

但没有按预期工作......有什么帮助吗？

回答by Marcel Wasilewski

Take a look at this, for me, this fiddlelooks 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>

回答by myf

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

很难猜测你想要的行为是什么，但很少有注意事项：

• You do not have to use duplicate keyframes and very close percentagesto 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.

• 您不必使用重复的关键帧和非常接近的百分比来实现“弹跳”：只需使用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>

回答by Victor Rocha

Refinement of the code already presented by the previous friend

对之前朋友已经提交的代码进行细化

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