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

看看这个，对我来说，this fiddle看起来非常准确：

＆＃13;

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

＆＃13;

<div class="quadrat"></div>

＆＃13;

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>

Answer 3

优化前一位朋友已经提交的代码

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

闪烁背景颜色动画

3 个答案: