Question

我想无限制地旋转图形元素，但需要一段时间间隔。

例如，旋转90度（平滑动画）然后在5秒后再旋转90度并无限重复。

这可以仅使用css完成吗？

这是我的JS BIN

Answer 1

非常简单。以下代码将转换限制为关键帧40%-60%（整个持续时间的五分之一）。因此，如果我们将6 seconds提供给整个动画，1.2s将用于移动，4.8s将用于延迟。您可以使用它来获得更准确的数字。

@-webkit-keyframes rotation {
    0%, 40%   {-webkit-transform: rotate(0deg);}
    60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
.wrapper a:last-child div {
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}

Answer 2

你可以尝试这样的事情。

@-webkit-keyframes rotation {
    0%,10%     {-webkit-transform: rotate(0deg);}
    90%,100%   {-webkit-transform: rotate(90deg);}
}

虽然它不允许精确计时，但它可以大致按照您的要求进行。

Answer 3

对于常规轮换，您可以使用

@-webkit-keyframes rotation {
    0% {-webkit-transform: rotate(0deg);}
    12.5%, 25% {-webkit-transform: rotate(90deg);} 
    37.5%, 50% {-webkit-transform: rotate(180deg);} 
    62.5%, 75% {-webkit-transform: rotate(270deg);} 
    87.5%, 100% {-webkit-transform: rotate(360deg);}
}

具有时间间隔的CSS动画

3 个答案: