请问为什么一开始要在img里设置left：50%，往右移动一半，然后再设置transform: translateX(-50%);让图片居中？作用是什么？
我感觉没好处只有坏处啊？坏处就是从左至右的动画移动到一半就停一下，不连贯了。那为什么要这么设置呢？
position:absolute,left:50%后
,让它往左移足够的空间,
显示它的全部宽度,
我这里采用transform: translateX(-50%);对它进行移位、
自动设置了自己的宽度为父宽度()的一半.
那是居中的一种写法。至于图片移动只有一半，你只要在动画里将left：0；补上就可以了。
translateY(Y)仅垂直方向移动（Y轴移动）可以说是上下移动
translateX(x)仅水平方向移动（X轴移动）可以说是左右移动
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）x左右移动，y上下移动
水平垂直居中