如何在jQuery中实现CSS动画0%、50%节点的图片翻转效果

实现方案 #

你可以直接通过CSS关键帧实现自动翻转效果，无需额外引入JS定时器，也能避免定时器和动画时长不同步的问题，修改方式如下：

1. 删除你当前编写的JS定时器代码，不需要通过JS控制翻转逻辑
2. 修改@keyframes example规则，在对应关键帧节点加入翻转配置即可

修改后的完整CSS代码如下：

.animation img {
  max-width: 100%;
}

.animation {
  width: 50px;
  position: absolute;
  bottom: 0;
  animation: example 15s infinite; 
  padding: 5px 9px 1px 0;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

@keyframes example {
  0%,
  100% {
    left: 0;  
    transform: scaleX(-1);
  }
  50% {
    left: 97%;  
    transform: scaleX(1);
  }  
}

原理说明

动画运行到0%/100%节点时角色位于页面左侧，即将向右跑动，设置scaleX(-1)保持面朝右；运行到50%节点时角色位于页面右侧，即将向左折返，设置scaleX(1)实现水平翻转让角色面朝左，和跑动方向完全匹配。原来的空关键帧（20%/30%/40%）无实际配置可以直接删除。

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