Question

如何使CSS 3关键帧动画看起来更平滑？

按原样，旋转似乎停止在180度。我希望它能完成360度的完整旋转，而不会停在中间。理想情况下，我希望它加快速度并降低速度。

.icon {
  display: inline-block;
  animation: like 2s 3s infinite;
  font-size: 40px;
}

@keyframes like {
  0% {
    transform: rotate( 0deg ) scale( 1 );
  }
  10% {
    transform: rotate( 15deg ) scale( 1 );
  }
  50% {
    transform: rotate( -180deg ) scale( 1.4 );
  }
  100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};

<div class="icon">
    &hearts;
</div>

PS：是否可以指定迭代之间的延迟？我以为可以用3s来实现，但是似乎只能在第一次迭代之前应用，而不是在后续迭代之前应用？

Answer 1

使用linear并通过增加更多百分比来使最后一个状态花费更多时间，以模拟迭代之间的延迟：

.icon {
  display: inline-block;
  animation: like 2s 3s infinite linear;
  font-size: 40px;
}

@keyframes like {
  0% {
    transform: rotate( 0deg ) scale( 1 );
  }
  10% {
    transform: rotate( 15deg ) scale( 1 );
  }
  50% {
    transform: rotate( -180deg ) scale( 1.4 );
  }
  80%,100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};

<div class="icon">
    &hearts;
</div>

Answer 2

您可以在每个关键帧上设置单独的计时功能。

将关键帧设置为容易达到180度，以使其开始平稳但以一定速度结束。

将下一个关键帧设置为相反方向，您将不停地浏览180个关键帧，但动画速度仍会增加或减少。

正如Teman Afif回答的那样，要在动画之间暂停，您需要将关键帧属性应用于2个不同的百分比。

.icon {
  display: inline-block;
  animation: like 6s infinite linear;
  font-size: 40px;
}

@keyframes like {
  0% {
    animation-timing-function: ease-in;
    transform: rotate( 0deg ) scale( 1 );
  }
  25% {
    animation-timing-function: ease-out;
    transform: rotate( -180deg ) scale( 1.4 );
  }
  50%, 100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};

<div class="icon">
    &hearts;
</div>

CSS关键帧动画中的平滑旋转

2 个答案: