Question

我创建了2个形状，并使用CSS动画使它们旋转。有什么方法可以指定每种形状旋转多长时间？

我希望第一个形状旋转5秒然后停止，但是我希望第二个形状继续旋转。

我的代码：

#square1 {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: yellow;
    margin-left: 240px;
    margin-top: 135px;
    animation: spin 1s linear infinite;
    animation-name: square1;
}
 
@keyframes square1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Answer 1

您想要的是更改动画的迭代次数。

您将在1秒内设置360度。多数民众赞成在一个循环的动画。现在，我们将迭代计数添加到第二个平方，以便在5秒钟内重复5次。

.square {
  /*position: absolute;*/
  width: 30px;
  height: 30px;
  background-color: yellow;
  margin-left: 240px;
  margin-top: 135px;
  animation: spin 1s linear;
  animation-name: square1;
}

.square2 {
  animation-iteration-count: 5;
}

@keyframes square1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="square square1"></div>
<div class="square square2"></div>

如何使形状旋转5秒

1 个答案: