Css3动画样式 设置匀速不生效

Question

animation: emojisAnimation 2s linear forwards;

就是一直在慢进快出，求问怎么改成匀速或者快进慢出啊

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

要将动画改成匀速进行，可以使用`animation-timing-function: linear;`，这样动画就会以匀速进行，不再有慢进快出的效果。如果想要使用快进慢出的效果，可以使用`animation-timing-function: ease-out;`。 下面是对应的案例和代码：

匀速动画效果

.element {
  animation: emojisAnimation 2s linear forwards;
}
@keyframes emojisAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

快进慢出动画效果

.element {
  animation: emojisAnimation 2s ease-out forwards;
}
@keyframes emojisAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

通过以上代码，你可以根据需求选择使用linear或ease-out来修改动画的速度变化方式。