CSS Animation 实现图片水平移动到端点时沿垂直轴翻转的方法

核心思路 #

要实现仅在端点瞬间翻转、移动过程中无翻转过渡的效果，只需要在动画的端点帧前后添加几乎重合的状态帧，将transform: scaleX()的变化限制在端点极小的时间区间内即可，避免翻转属性在整个移动区间产生渐变过渡。

优化后完整代码 #

首先把重复的公共属性从关键帧中抽离，减少冗余代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .duck {
      width: 100px;
      height: 100px;
      position: relative;
      top: 20px;
      background: url("https://e7.pngegg.com/pngimages/644/738/png-clipart-yellow-duck-toy-plastic-duck-animals-ducks-thumbnail.png") no-repeat;
      background-size: contain;
      animation: duck 8s infinite;
    }

    @keyframes duck {
      0% {
        left: 250px;
        transform: scaleX(1);
      }
      /* 到达左端点前保持正向 */
      49.99% {
        left: 20px;
        transform: scaleX(1);
      }
      /* 到达左端点瞬间翻转 */
      50% {
        left: 20px;
        transform: scaleX(-1);
      }
      /* 返回右端点前保持反向 */
      99.99% {
        left: 250px;
        transform: scaleX(-1);
      }
      /* 回到右端点瞬间恢复正向 */
      100% {
        left: 250px;
        transform: scaleX(1);
      }
    }
  </style>
</head>
<body>
  <div class="duck"></div>
</body>
</html>

实现说明 #

• scaleX(1) 代表元素水平方向正常显示，scaleX(-1) 代表元素沿垂直轴水平翻转
• 把翻转的状态切换限制在49.99%到50%、99.99%到100%这两个极短的时间区间内，人眼感知不到过渡过程，就会呈现出仅在端点瞬间翻转的效果
• 公共样式（背景、固定top值）抽离到元素本身的CSS规则中，无需在每个关键帧重复声明

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