CSS在Y轴上的无限旋转

Question

我想要做一个硬币的动画，让它在Y轴上无限旋转，但我似乎无法实现。这是演示链接：https://jsfiddle.net/kaeatjag/。你可以看到它只会旋转一次，然后重新开始。我该怎么修复这个问题？

.coin {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(to right, red 50%, black 50%);
  animation: coin-rotate 1s both infinite;
}

@keyframes coin-rotate {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(180deg);
  }
}

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

- Indy

---

只需为动画添加一个额外的帧！https://jsfiddle.net/kaeatjag/1/ - Pugazh

Answer 1

只需在动画中添加一个额外的帧并将其恢复到原始状态。

从 0% (0deg) -> 50% (180deg) -> 100% (0/360deg) 进行变换

注意：根据您的需要调整动画持续时间

更新的 fiddle

.coin {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(to right, red 50%, black 50%);
  animation: coin-rotate 2s both infinite;
}
@keyframes coin-rotate {
  0 {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

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

- Pugazh

Answer 2

这可能有些取巧，但如果你想要动画平滑过渡，可以这样做：

CSS + HTML 代码：

.coin { 
      width: 100px;
      height: 100px;
      font-size: 0.5px;
      animation: coin-rotate 8s infinite;
      background: linear-gradient(to right, red 50%, black 50%);
      border-radius: 100px;
      }
       

.a {
   opacity: 0.1;
   }
        
@keyframes coin-rotate  {  
                        0%  {
                            transform: rotateY(0deg); 
                            transform-origin: 50% 5% 0;
                            }  
                        100% {
                             transform: rotateY(360deg); 
                             transform-origin: 50% 5% 0;
                             }  
                        }

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

奇怪的是，如果您尝试

1. 去掉句号
2. 将字体大小设置为零或
3. 将不透明度设置为零

动画会出现水平运动效果，这可能是您在说：

如您所见，它只播放一次

时含蓄地提到的内容。

因此，推断上述解决方案可能修复看似真正问题的症状，而非总体问题。

至少在我的浏览器中，负责处理旋转的CSS处理器检查是否存在“可见对象”，并且未考虑背景属性作为旋转目的的“对象”，这导致动画以与代码最合理的阅读方式相反的方式消失到侧面的故障。

上面的代码是我目前能做到的最美丽的。

我在实验找到解决方案时还更改了一些旋转参数，但是更改它们或者玩弄数字直到您得到感觉良好的东西应该不会有太大问题。

希望这对您有所帮助！

- user6498206

Answer 3

将您的动画更改，使其结束状态与起始状态相似。对于这种循环动画，您需要进行转换以回到起始状态。

@keyframes coin-rotate {
  0% {
    transform: rotateY(0);
  }

  50% {
    transform: rotateY(180deg);
  }

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

- Mohit Bhardwaj