我怎样才能使一个css动画再运行1次然后停止？

Question

嘿伙计这个问题看起来有点奇怪，但我有一个css关键帧动画运行无限。我想在这个动画中添加一个类，这样我就可以在函数运行后再运行一次。所以在我的情况下，我有4辆汽车以不同的速度播放相同的动画。当我运行我的功能时，我希望汽车在那里运行或进行一次全新的运行，但之后他们必须停下来。这样做的：

animation-iteration-count: 1;

似乎没有用，汽车只是消失了。任何人都可以帮助我吗？

CSS：

.car {
    animation-duration: 8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: FloatCar;
    animation-timing-function: linear;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 70px;
    left: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.carStop {
    animation-iteration-count: 1;
}

@keyframes FloatCar {
    from {
        transform: translateX(-130%) translateZ(0)
    }
    ;
    to {
        transform: translateX(100%) translateZ(0)
    }
    ;
}

使用Javascript：

function stopCars () {
  var allCars = document.querySelectorAll('.car')
  for (var item of allCars) {
    item.className += ' carStop'
  }
}