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

Posted 2023-03-06

【中文标题】CSS关键帧动画中的平滑旋转

【英文标题】：Smooth rotation in CSS keyframe animation

【发布时间】：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 实现，但它似乎只在第一次迭代之前应用，而不是在后续迭代之前应用？

【参考方案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>