Question

我正在尝试在Y轴上无限旋转的硬币动画，但我无法完成这项工作。这是演示：https://jsfiddle.net/kaeatjag/ 你可以看到它只动画一次，一次旋转然后从头开始。我该如何解决这个问题？

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

Answer 1

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

从0% (0deg) -> 50% (180deg) -> 100% (0/360deg)转换

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

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

Answer 2

更改动画，使其结束状态与启动状态类似。对于这样的循环动画，您需要使转换回到起始状态。

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

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

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

Answer 3

有点像黑客，但如果你想要的是动画顺利过渡，你可以这样做：

CSS + HTML 代码：

＆＃13;

.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;
                             }  
                        }

＆＃13;

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

＆＃13;

奇怪的是，如果你试图

删除句号
将字体大小设置为零或
将不透明度设置为零

当您说：

正如你所看到的那样只有动画一次

因此，通过推论，上述解决方案应该可能解决看似真正的问题，如果只是症状，而不是总体问题。

看来，至少在我的浏览器中，负责处理轮换的CSS处理器检查是否存在可见对象＆＃39;并且未能将背景属性视为对象＆＃39;出于旋转的目的，这导致了一个小故障，其中动画以与最符合逻辑的代码读取相反的方式消失在一边。

上面的代码就像我现在能做到的一样漂亮。

我在尝试寻找解决方案的过程中也改变了一些旋转参数，但在更改它们或弄乱数字之前不应该有太大的问题。得到你认为合适的东西。

希望这有用！

在Y轴上的CSS无限旋转

3 个答案: