更改背景位置没有动画

我有了这个代码conteniosly在CSS和HTML变化的背景工作：更改背景位置没有动画

animation: animated 10s linear infinite; 

@keyframes animated { 
    0% { background-position: 0px bottom; } 
    25% { background-position: -200px bottom; } 
    50% { background-position: -400px bottom; } 
    75% { background-position: -600px bottom; } 
}

目前在动画中的背景的动作，但我想有背景开关位置一次去 - 所以看起来图像改变而不是移动。

这有可能只用CSS？

来源

2017-05-24 Michael Nielsen

你需要什么是的，而不是

25% { background-position: -200px bottom; } 
50% { background-position: -400px bottom; }

你不喜欢它：

25.01%, 50% { background-position: -200px bottom; } 
50.01%, 75% { background-position: -400px bottom; }

因此你会几乎消除需要转型，从一个关键帧到另一个时间。

演示：jsFiddle

*{ padding:0; margin:0; } 
 
#bg{ width:100%; height:100vh; 
 
    background: url('//www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg') no-repeat; 
 
    animation: slideshow 5s infinite; 
 
} 
 
@keyframes slideshow { 
 
    0%, 25% { background-position: 0px bottom; } 
 
    25.01%, 50% { background-position: -200px bottom; } 
 
    50.01%, 75% { background-position: -400px bottom; } 
 
    75.01%, 100% { background-position: -600px bottom; } 
 
}

<div id="bg"></div>

来源

2017-05-24 07:40:00

优雅:)至少在我看来。 –

我很高兴它帮助:)享受编码！ –

其实，我只是看了其他的答案和@Gerard通过使用CSS提供一个更好的答案[**'步骤（）'**]（https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function＃The_steps（）_ class_of_timing-functions）我完全忘记了，这是最好的答案，但有一点调整..'动画：动画10s步骤（4）无限;'** https ：//jsfiddle.net/cw7ru9je/3/** –

您可以删除linear在CSS

animation: animated 10s infinite; 

@keyframes animated { 
    0% { background-position: 0px bottom; } 
    25% { background-position: -200px bottom; } 
    50% { background-position: -400px bottom; } 
    75% { background-position: -600px bottom; } 
}

来源

2017-05-24 07:31:38

不在于简单地改变背景位置一次，没有它的4间无休止地改变背景位置？ –

“动画：动画10s无限;”给人一种轻松的动画:( –

您需要使用一些JS与10000mssetTimeout切换背景位置

$(document).ready(function() { 
 
    var koef = 1; 
 

 
    setInterval(function() { 
 
    $('#image').css({'background-position-x': 600 * -koef}); 
 
    koef = !koef; 
 
    }, 1000); 
 
});

#image { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url(http://lorempixel.com/g/1000/200/) no-repeat 0 bottom; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image"></div>

来源

2017-05-24 07:31:53 Justinas

并不简单地改变背景位置一次，没有它的4背景位置之间无休止的变化？ –

@MichaelNielsen你如何想象瞬间改变后台位置无限次？我像它切换到一个办法，那就是它 – Justinas

像我给了代码示例，它不断地移动位置的比特 - 它只是目前它的移动点点的背景位，而不是“跳”直接定位-200 ，然后-400，-600和回0在10秒内。 –

使用以下命令：

animation: animated 10s steps(4) linear infinite; 
@keyframes animated { 
    from { 
    background-position: 0px 0px; } 
    to { 
    background-position: 600px 0px; } 
}

来源

2017-05-24 07:50:41 Gerard

是肯定更好，给予好评，这里的[**的jsfiddle演示**]（https://jsfiddle.net/cw7ru9je/3/）对于这个答案，但是，它应该是'动画：动画10步（4）无限;'而是 –

更改背景位置没有动画

回答

相关问题