如何设置<img/>的更改动画？

Question

我每隔2秒更改一次<img>上的图片。我想要的是当前图像向左滑出，下一个图像从右侧滑入使用纯CSS / JS？（不是JQuery）。

P.S：我确定这里有一个类似的问题，但我是网络开发人员的新手，所以我不知道用哪些关键词来提出相关答案。

JS：

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));
}