时间戳

首页 > 解决方案 > 是否可以让元素的旋转速度比它在 CSS 中的翻译速度慢？

html - 是否可以让元素的旋转速度比它在 CSS 中的翻译速度慢？

问题描述

我正在摆弄 3D CSS 动画，并且遇到了一个问题，即我有一个正在 X 轴上平移的移动元素。此转换运行 2 秒。但是，我还想对运行 30 秒的 Y 轴上的元素应用旋转。

我遇到的问题是，由于 translate 和 rotate 都是 CSS 中的 transform 属性的一部分，似乎没有一种方法可以对它们中的每一个应用单独的时间。

.ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: animate 2s infinite linear;
}

@keyframes animate {
  to {
    transform: translateX(100px) rotateY(360deg);
  }
}
<html>
  <body>
    <div class="ball"></div>
  </body>
</html>

如您所见，我可以让球同时平移和旋转，但我不知道如何对每个动画应用单独的计时。同样，我希望平移是一个 2 秒的动画，但旋转是一个 30 秒的动画。这可能吗？

标签： htmlcsscss-animations

解决方案

由于 transform 是单个属性，因此您必须使用包装器：

.ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(171,17,121,1) 0%,   rgba(17,171,154,1) 100%);
    animation: animate2 .5s infinite linear;
}

.ballWrapper {
    animation: animate 2s infinite linear;
}

@keyframes animate {
    to {
        transform: translateX(200px);
    }
}

@keyframes animate2 {
    to {
        transform: rotateY(360deg);
    }
}
<body>
    <div class="ballWrapper">
        <div class="ball"></div>
    </div>
</body>

推荐阅读