Question

我正在开发一个项目，我应该在div闪存的特定部分，（或只闪烁一次）

HTML：

<p  style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink" >Current Price</p>

和CSS

<style>
  #divtoBlink{
    background: #008800;
    animation-duration: 1000ms;   
    animation-name: blink;
    animation-iteration-count: 1;
    animation-direction: alternate;      
  }

  @keyframes blink {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
</style>

闪烁，颜色变为绿色。但颜色保持绿色。我想再次将background: #008800;重置为白色或透明。是否有可以使用的属性或调整？任何帮助表示赞赏。

Answer 1

我认为您需要的只是background在闪烁后变为透明并且文本保持可见。如果是这种情况，请使用以下代码段。当opacity从1设置为0时，整个元素及其内容将变为不可见。相反，仅仅为background制作动画就足够了。

＆＃13;

#divtoBlink {
  background: #008800;
  animation-duration: 1000ms;
  animation-name: blink;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes blink {
  from {
    background: #008800;
  }
  to {
    background: transparent;
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>

＆＃13;

原始答案：

所需要的只是添加animation-fill-mode: forwards，以便元素保持其最终关键帧（opacity: 0或透明）的状态。目前，动画完成后，动画元素将恢复为原始状态（background: #008800）。

＆＃13;

#divtoBlink {
  background: #008800;
  animation-duration: 1000ms;
  animation-name: blink;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>

＆＃13;

Answer 2

我认为在您的情况下，更改模式会更容易。

初始颜色为白色，然后让它闪烁绿色并再次重置为您希望的颜色（白色或透明）。通过自定义关键帧轻松解决问题。（看小提琴）

 #divtoBlink{
    background: #fff;
    animation-duration: 1000ms;   
    animation-name: blink;
    animation-iteration-count: 1;
    animation-direction: alternate;      
  }

  @keyframes blink {
    0%   { background: #008800;}
    50% { background: #fff;} // optional sugar any color between..
    100% { background: #fff; }
  }

http://jsfiddle.net/a2pg246h/

重置背景颜色CSS

2 个答案: