如何在CSS动画中实现图片沿X轴翻转（转向时自动翻转）

原代码的核心问题 #

• CSS语法错误：.a { }错误嵌套在.a选择器内部，且末尾多了一个冗余的}，导致浏览器无法正确解析后续样式。
• 重复class属性：img标签重复定义了class属性，浏览器仅会识别第一个class列表，character类完全失效。
• 翻转逻辑未关联运动方向：固定的.left类只会让图片保持单向翻转状态，无法在动画切换运动方向时自动翻转。

修复并实现需求的代码 #

以下方案通过JS监听动画循环事件，在运动方向切换时自动翻转图片，同时修复了所有语法问题：

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  width: 50px;
  height: 50px;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* 用CSS变量控制翻转方向，初始为正向 */
  transform: scaleX(var(--flip-dir, 1));
}

@keyframes box {
  0%   { left: var(--rando0); top: var(--rando1);}
  25%  { left: var(--rando2); top: var(--rando3);}
  50%  { left: var(--rando4); top: var(--rando5);}
  75%  { left: var(--rando6); top: var(--rando7);}
  100% { left: var(--rando8); top: var(--rando9);}
}
</style>
</head>
<body>
<!-- 合并class属性，用空格分隔多个类名 -->
<img src="image.gif" alt="imagehere" class='a character'>

<script>
const root = document.querySelector(":root");
// 生成随机位置变量
for(let i = 0; i < 10; i++) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}

// 监听动画循环事件，每次方向切换时翻转图片
const imgEl = document.querySelector('.a');
let isForward = true;
imgEl.addEventListener('animationiteration', () => {
  isForward = !isForward;
  imgEl.style.setProperty('--flip-dir', isForward ? 1 : -1);
});
</script>
</body>
</html>

代码优化建议 #

• 删除冗余代码：原代码中被注释的无效样式、空选择器全部删除，减少代码体积。
• 语义化变量命名：将--rando0这类模糊命名改为--pos-0、--pos-1，提升代码可读性。
• 优化动画性能：用transform: translate()替代left/top控制位置，减少浏览器重排，提升动画流畅度，示例：

  @keyframes box {
    0%   { transform: translate(var(--rando0), var(--rando1));}
    /* 其余关键帧同理修改 */
  }
  

• 简化动画逻辑：如果不需要5个随机节点，可简化为起始-结束两点的运动，进一步减少代码复杂度。

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