反应CSS闪烁动画无法正常运行

Question

我正在尝试使Flash动画具有反应性，但无法正常工作。我使用的代码如下：

@-webkit-keyframes capulse {
    0% {
      background-image: url("../../../../../assets/img/decks/cameras/2/camera360Red.png");
      opacity: 1;
    }

    50% {

      background-image: url("../../../../../assets/img/decks/cameras/2/camera360Blue.png");
      opacity: 1;
    }

    100% {
      background-image: url("../../../../../assets/img/decks/cameras/2/camera360Red.png");
      opacity: 1;
    }
}

.camera-icon-active {       
    width: 220%;      
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation: capulse 1s linear;
}

Answer 1

您应该在动画值处添加“无限”。

.camera-icon-active {       
width: 220%;      
background-repeat: no-repeat;
background-size: contain;
-webkit-animation: capulse 1s infinite linear;

}

Answer 2

好的，很好

正确的代码是

  .camera-icon-active {       
    width: 220%;      
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation: capulse 1s infinite linear;
}