动画-js停顿效果

.content_con_left ul{
    width: 2000px;
    height: 300px;
    animation: flash linear 3s 0s infinite alternate;
}
@keyframes flash {
    0%{
        margin-left: 0;
    }
    25%{
        margin-left: -500px;
    }
    50%
    {
        margin-left: -1000px;
    }
    75%{
        margin-left: -1500px;
    }
    100%{
        margin-left: -2000px;
    }
}

无法实现停顿效果，用hover也只能实现鼠标移动到那边停顿，必须用js设置停顿3秒钟再执行下一动画

<script>
                    var area = document.getElementById('mocc');
                    var con1 = document.getElementById('con1');
                    var con2 = document.getElementById('con2');
                    var speed = 1;//滚动的速度
                    var delay = 3000;//间隙停留时间
                    var ileight = 500;
                    var myscroll;
                    con2.innerHTML = con1.innerHTML;//复制节点，用于循环
                    area.scrollLeft = 0;
                    //
                    function startMove()
                    {
                        area.scrollLeft++;
                        myscroll = setInterval("scrollLeft()",speed);
                    }
                    //
                    function scrollLeft()
                    {
                        if(area.scrollLeft % ileight == 0)
                        {
                            clearInterval(myscroll);
                            setTimeout("startMove()",delay);
                        }
                        else
                        {
                            area.scrollLeft++;
                            if(area.scrollLeft >= area.scrollWidth/2)
                            {
                                area.scrollLeft = 0;
                            }
                        }
                    }
                    //
                    setTimeout("startMove()",delay);//初始化
                </script>

最后

以上就是勤恳雪碧为你收集整理的动画-js停顿效果的全部内容，希望文章能够帮你解决动画-js停顿效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。