是否可以平滑地停止悬停时触发的关键帧 css 动画？答案

【问题标题】：Is it possible to smoothly stop keyframe css animation that is triggered on hover?是否可以平滑地停止悬停时触发的关键帧 css 动画？
【发布时间】：2023-02-16 01:06:51
【问题描述】：

这是悬停时的简单旋转关键帧动画。工作正常开始正常，但是当指针移出动画突然停止并且立方体跳回初始状态。是否可以仅使用 css 添加缓动时间或任何使其平滑的东西。

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#cube:hover {
  animation: rotating 12s linear infinite;
}

#cube{
width: 100px;
height: 100px;
background:red;
transition-duration: 3s; /*Doesn't work*/
}

&lt;div id="cube"&gt;&lt;/div&gt;

【问题讨论】：

标签： css css-animations css-transitions

【解决方案1】：

您可以为旋转动画添加缓动效果，以便在指针移出时平滑过渡。

你可以缓入缓出定时功能，逐渐加速，然后减慢旋转：

#cube:hover {
  animation: rotating 12s ease-in-out infinite;
}

您还可以调整缓动效果的持续时间：

#cube:hover {
  animation: rotating 12s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
}

【讨论】：