用 CSS 翻转 3 个硬币图像

Question

我想用这 3 张图片掷硬币，我希望每张图片在旋转时都可以改变，这样用户就看不到每张图片的原始变化。我知道解决方案可以通过改变百分比来解决，但不能弄清楚

结论：当每一枚硬币发生变化时，我都想“隐藏”起来。

这是 HTML 和 CSS

.coin {
    height: 40px;
    width: 40px;
    animation: spin 18s ease infinite;
    border-radius: 50%;
    background-size: cover;
}

    @keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/w0M0NjP/3.png");
    }

    33.33% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/w0M0NjP/3.png");
    }

    33.34% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/n7k3p0X/2.png");
    }

    66.66% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/n7k3p0X/2.png");
    }

    66.67% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/gmzSqzG/1.png");
    }
    
    100% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/gmzSqzG/1.png");
    }
}    

<div class="coin"></div>

Answer 1

考虑 2 个动画，它会更容易处理。一个用于将持续Xs 的旋转，另一个用于将持续(3/2)*Xs 的图像更改，延迟为X/4s，因为您需要打开90deg 角度和90deg=360deg/4

.coin {
  height: 40px;
  width: 40px;
  animation: 
    spin 2s linear infinite,
    change 3s infinite linear .5s;
  border-radius: 50%;
  background-size: cover;
}

@keyframes change {
  0%,33.33% {
    background-image: url("https://i.ibb.co/w0M0NjP/3.png");
  }
  33.34%,66.66% {
    background-image: url("https://i.ibb.co/n7k3p0X/2.png");
  }
  66.67%,100% {
    background-image: url("https://i.ibb.co/gmzSqzG/1.png");
  }
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

<div class="coin"></div>

有一个变量可以更好地控制

.coin {
  --x:4s;
  height: 40px;
  width: 40px;
  animation: 
    spin var(--x) linear infinite,
    change calc(3*var(--x)/2) infinite linear calc(var(--x)/4);
  border-radius: 50%;
  background-size: cover;
}

@keyframes change {
  0%,33.33% {
    background-image: url("https://i.ibb.co/w0M0NjP/3.png");
  }
  33.34%,66.66% {
    background-image: url("https://i.ibb.co/n7k3p0X/2.png");
  }
  66.67%,100% {
    background-image: url("https://i.ibb.co/gmzSqzG/1.png");
  }
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

<div class="coin"></div>