图片动画效果问题

Question

有8张图片，他们有相同的动画效果，但每次只显示一张图片，怎么让一张图片的动画效果结束后显示下一张？求大神指点

Answer 1

找到方法了，写一个监听
//监听动画

    var i=0;
    $("#conimg").attr("src", photos[i]);
    var animateRoll = document.getElementById('animateRoll');
    animateRoll.addEventListener("webkitAnimationIteration", function () {
        //console.log("动画结束");
        i++;
        $("#conimg").attr("src", photos[i]);
        if(i==photos.length-1){
            i=-1;
        }
        //console.log(i);
    }, false);

Answer 2

同动画延迟啊

Answer 3

你可以写一个css动画，给8张重复使用，至于每次只显示一张，当第一张动画结束后，再显示下一张，以此类推。这个可以用js实现，可以监听webkitTransitionEnd事件，这个是当css完成过渡后触发的事件。自行百度一下。