我正在尝试用
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;
- }
- <div id="masthead"></div>
解决方法
Javascript可能是一个更好的方法来处理这个问题.虽然在CSS中,您可以重复背景图像并将背景位置和动画持续时间扩展到非常高的数字.这是一个
fiddle.
- @keyframes slideleft {
- from { background-position: 0%; }
- to { background-position: 90000%; }
- }
- #masthead {
- background-repeat: repeat-x;
- ...
- animation: slideleft 600s infinite linear;
- }
如果您使用的是jQuery,那将非常简单：
- (function animateBG() {
- $('#masthead').animate({
- backgroundPosition: '+=5'
- },12,animateBG);
- })();
