css - react CSS 闪烁动画不工作无限

Question

我正在尝试在 React 上制作 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;