用 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>

用 CSS 翻转 3 个硬币图像

Fliping 3 coin images with CSS

html

css

animation