本代码由 darcyc 大佬分享提供！
动画从头到尾的速度是相同（匀速）：animation-timing-function:linear;
动画以低速开始，然后加快，在结束前变慢（默认效果）：animation-timing-function:ease;
动画以低速开始：animation-timing-function:ease-in;
动画以低速结束：animation-timing-function:ease-out;
动画以低速开始和结束（个人感觉最漂亮）：animation-timing-function:ease-in-out;

修改下面代码可以更换移动方向：
from {left:20px;}
to {left:350px;}

代码如下

<style> 
.an{
	width:500px;
	height:240px;
	position:relative;
	animation:myfirst 8s;
	animation-iteration-count: infinite;
  animation-direction:alternate;
  animation-timing-function:ease-in-out;
	}

@keyframes myfirst
{
	from {left:20px;}
	to {left:350px;}
}
</style>

<div class="an"><img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/19/150712_202824_330.gif" width = 200 /></div>

上下循环移动

<MARQUEE direction=up height=230 behavior=alternate width=280><img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/16/125259_202824_s.png' width=200 class='no-lity'></MARQUEE>