为网站Extraction的X字母添加旋转缩放动画遇问题求助

问题分析 #

你的现有代码存在两个核心问题：

• 关键帧（keyframes）的终点状态错误，未回到初始旋转角度与缩放比例，导致动画卡顿且无法形成流畅循环
• 缩放使用scale(-0.5)会同时翻转元素并缩小，但目标动画的翻转与缩放节奏需要更贴合GIF的流畅过渡

修正后的代码 #

<h1 class="name"> X </h1>

.name {
  /* 调整动画时长贴合目标节奏，用ease-in-out让过渡更自然 */
  animation: rotateZoom 1.2s infinite ease-in-out;
  /* 确保元素围绕中心旋转 */
  transform-origin: center;
}

@keyframes rotateZoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    /* 顺时针旋转180°，同时水平缩小翻转，匹配GIF视觉效果 */
    transform: rotate(180deg) scaleX(0.5);
  }
  100% {
    /* 逆时针旋转回0°，恢复原尺寸与方向 */
    transform: rotate(0deg) scale(1);
  }
}

关键优化点 #

• 重构关键帧逻辑：让动画从初始状态出发，到50%完成顺时针旋转+缩小翻转，再到100%回到初始状态，形成流畅循环
• 改用scaleX缩放：仅水平方向翻转缩放，更贴合目标GIF中X元素的变形方向
• 设置旋转原点：transform-origin: center确保元素始终围绕中心旋转，避免偏移
• 调整动画参数：1.2s时长与ease-in-out缓动函数让动画节奏更接近目标GIF的流畅感

内容的提问来源于stack exchange，提问作者snooze alarms