css - 只播放第一个关键帧一次/队列动画

Question

我编写了以下 CSS:

    .bulb--off { 
    position: relative;
    z-index: 11;
}

.bulb--on { 
    position: absolute;
    z-index: 11;
    left:rem(1);
    right:0;
    opacity:0;
} 
.bulb--on { 
    opacity:0.4;
    animation-name: bulbFlicker;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: 1s;
}
@keyframes bulbFlicker {
    0%   { opacity: 1; }
    25%  { opacity: 0.9; }
    50%  { opacity: 0.95; }
    75%  { opacity: 0.9; }
    100% { opacity: 1; }
}

我希望这里发生的是灯泡会从关闭(不透明度:0)逐渐变亮(不透明度:1)然后闪烁。

实际发生的是灯泡从关闭跳到打开(没有淡入淡出)然后开始闪烁，显然发生的事情是当动画开始时它应该开始关键帧 1。我试过在不透明度上添加一个过渡，这样当它开始关键帧 1 时它会淡入淡出，但它似乎忽略了该属性。有没有一种方法可以链接动画，甚至只播放第一个关键帧一次？

我认为我可以使用 javascript 来做到这一点，但我已经成功地仅使用 CSS 做到了这一点，理想情况下我希望它只使用 CSS。

Answer 1

如果您应用两个动画，并向第二个添加与第一个动画长度相等的延迟，您将获得播放的第一个效果。

.light {
  -webkit-animation: fade 3s;
  animation: fade 3s;
  opacity: 1;
}
.light .bulb {
  -webkit-animation: jitter 1s infinite;
  animation: jitter 1s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes jitter {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes jitter {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
/*Meaningless stuff for it to look cool*/

.bulb {
  width: 50px;
  height: 50px;
  border: 2px solid gray;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 50% 85%;
  border-bottom-right-radius: 50% 85%;
  background-color: yellow;
}
.metal {
  margin-left: 10px;
  width: 34px;
  height: 10px;
  background-color: gray;
  border-bottom-right-radius: 10%;
  border-bottom-left-radius: 10%;
}
.pole {
  margin-left: 17.5px;
  height: 100px;
  width: 20px;
  background-color: gray;
}

<div class="light">
  <div class="bulb"></div>
  <div class="metal"></div>
  <div class="pole"></div>
</div>