Javascript 如何设置我的<；img>；？

我每2秒更改一个

上的图像。我想要的是使用纯CSS/JS（而不是JQuery）将当前图像滑出到左侧，并将下一个图像从右侧滑入

附言：我确信这里的某个地方也有类似的问题，但我是网络开发新手，所以我不知道使用哪些关键字来给出相关的答案

JS:

---

不要对动画使用

setTimeout

，而是使用

requestAnimationFrame

，因为它针对动画场景进行了优化，并提供了更高的运行时性能和更好的移动设备电源使用率。但对于普通动画，请使用CSS转换和CSS动画，而不是Javascript。您能否提供一个关于我的代码的示例？。我相信这部动画也可以说是平凡的，这里有很多例子；因此，iv使用了一个@keyframe（谢谢@Dai）让它工作起来。现在，我想将动画中途暂停一段指定的时间，然后继续

var imageID=1;
function changeimage(every_seconds){
//change the image

    if(imageID==1){
        //how do i animate this?
        document.getElementById("myimage").src="1.png";
        imageID++;

    }else if(imageID == 2){

        document.getElementById("myimage").src="2.png";
        imageID++;

    }else if(imageID == 3){

        document.getElementById("myimage").src="3.png";
        imageID = 1;

    }


//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}