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>

仅播放第一个关键帧/队列动画

1 个答案: