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

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

对代码进行细微调整可以解决该问题。

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

.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>

完美平滑的循环缓和CSS动画

1 个答案: