javascript - 完美流畅的循环缓和 css 动画

Question

我正在尝试为元素设置动画，使其从左向右缓慢移动一小段距离并以平滑的方式进行，但结果不是很好。

这是我目前所拥有的:

.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
@keyframes sideways {
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(-30px);
  }
}

Answer 1

我认为问题与 transform 属性的 keyframes 中缺少起点有关。

对您的代码稍作调整应该可以解决该问题。

不同的 animation-timing-function 值或时间范围(例如小于 5 秒)也可能更适合您。

.contain { width:100% }
.animate_sideways {
  width:40px;
  height:40px;
  background:#482;
  animation:sideways 5s linear infinite;
  animation-timing-function:ease-in, ease-in-out;
}
@keyframes sideways {
  0% { transform: translateX(-30px) }
  50% { transform: translateX(30px) }
  100% { transform: translateX(-30px) }
}

<div class="contain">
<div class="animate_sideways"></div>
</div>