6

我想无限地旋转图形元素，但要逐步旋转一些时间间隔。

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

这可以仅使用 css 完成吗？

这是我的JS BIN

4

3 回答 3

19

很简单。以下代码将转换限制为关键帧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;
}

片段

@-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 {
  position: relative;
}
.wrapper a:first-child div{
  position: absolute;
  width:25px;
  height:25px;
  top: 13px;
  left: 13px; 
  background: red;
  z-index: 100;
}
.wrapper a:last-child div {
  width:50px;
  height:50px;
  position: relative;
  background: orange;
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <a href="#"><div></div></a>
    <a href="#"><div></div></a>
  </div>
</body>
</html>

于 2013-09-15T12:06:57.747 回答
3

你可以试试这样的。

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

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

于 2013-09-15T12:01:08.390 回答
1

对于定期轮换，您可以使用

@-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);}
}
于 2013-09-15T12:04:24.543 回答