小编Nin*_*der的帖子

如何在没有动画中断的情况下连续水平滚动背景图像？

我正在尝试用css3动画创建一个横向无限滚动的横幅.问题是,在动画结束后,当它重新启动时会有严重的切割.我正在试图弄清楚如何防止这种苛刻的动画.

我把我的代码放在这里.

@keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}

@-webkit-keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}

#masthead {
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg');
animation: slideleft 5s infinite ease-in-out;
-webkit-animation: slideleft 5s infinite ease-in-out;
width: 100%;
height: 1200px;
}

Run Code Online (Sandbox Code Playgroud)