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

【问题标题】：Smooth rotation in CSS keyframe animationCSS关键帧动画中的平滑旋转
【发布时间】：2019-03-11 08:32:13
【问题描述】：

如何让这个 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 实现，但它似乎只在第一次迭代之前应用，而不是在后续迭代之前应用？

【问题讨论】：

标签： css animation css-animations keyframe

【解决方案1】：

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

将关键帧设置为 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>

【讨论】：

【解决方案2】：

使用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>

【讨论】：