使用CSS3动画关键帧继续滑块 [英] Continues slider using css3 animation keyframes
问题描述
我正在使用CSS3构建滑块。现在，滑块正在连续运行，但是流程不正确。幻灯片4之后，滑块从左到右一直向下到第一张幻灯片。
I am building a slider using css3. Now slider is running continuously but the flow is not right. After slide 4 the slider is going back from left to right all the way down to the first slide.
上一张幻灯片之后我想要的是第一张幻灯片应该从右边来
What I want after the last slide the first slide should come from right to left as it is coming in manner for other slide.
仅通过CSS就能做到吗？
Will it be possible by css only?
@keyframes slide{
0%{ transform:translateX(0px) }
25%{ transform:translateX(-200px) }
50%{ transform:translateX(-400px) }
75%{ transform:translateX(-600px) }
100%{ transform:translateX(0px) }
}
推荐答案
原因：
原因您会看到这种反向移动是因为在动画持续时间的75％至100％之间，元素图像从-600px移动到了0px。此运动将与其他运动一样是渐进的，并且由于有相当长的一段时间（1.25秒），您会看到它。
The reason you are seeing this reverse movement is because between 75% and 100% of animation's duration the element image is moving from -600px to 0px. This movement will be gradual just as with the rest of the movement and since there is a significant period of time (1.25s), you get to see it.
解决方案1：（在4-> 1之间即时切换，可能不是您想要的）
Solution 1: (instant switch between 4 -> 1, may not be what you're after)
您可以通过确保立即完成从-600px到0px的移动来隐藏此反向移动。为此，请像下面的代码片段一样更改关键帧。在这种情况下，从-600px到0px的移动发生的时间很短（动画时间的0.001％），因此眼睛看不到。
You can hide this reverse movement by making sure that the movement from -600px to 0px is done instantaneously. To do this, alter the keyframes like in the below snippet. In this case, the movement from -600px to 0px happens over a very short period of time (0.001% of the animation duration) and so it wouldn't be visible to the eye.
#slideshow {
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
animation: slide 5s infinite;
}
@keyframes slide {
0% {
transform: translateX(0px)
}
33.333% {
transform: translateX(-200px)
}
66.666% {
transform: translateX(-400px)
}
99.999% {
transform: translateX(-600px)
}
100% {
transform: translateX(0px)
}
}
<div id="slideshow">
<img src="http://oi67.tinypic.com/24mia39.jpg">
</div>
解决方案2：（在4-> 1之间滑动）
Solution 2: (slide movement between 4 -> 1)
或者，如果您希望4-> 1也要滑动而不是瞬时移动（这很可能是您的问题），那么您可能必须使用多个 img 元素。当第一个图像移出视线（即从-600px变为-800px）时，第二个图像将开始进入并因此产生连续的效果。
Alternately, if you want 4 -> 1 also to be slide movement instead of instantaneous (which may very well be your question) then you may have to use more than one img element. The time when 1st image moves out of view (that is goes from -600px to -800px), the second one would start coming in and thus would produce a continuous effect. This wouldn't be possible with a single one.
#slideshow {
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
position: absolute;
left: 200px;
top: 0;
animation: slide 5s infinite 3.75s;
}
@keyframes slide {
0% {
transform: translateX(0px)
}
25% {
transform: translateX(-200px)
}
50% {
transform: translateX(-400px)
}
75% {
transform: translateX(-600px)
}
100% {
transform: translateX(-800px)
}
}
<div id="slideshow">
<img src="http://oi67.tinypic.com/24mia39.jpg">
<img src="http://oi67.tinypic.com/24mia39.jpg">
</div>
以下是同一解决方案的一种变体，其中包含多个图像，而不是一个包含4个图像的图像。
Below is a variant of the same solution with multiple images instead of one with 4 pieces.
#slideshow {
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;
}
#slideshow img {
position: absolute;
left: 0px;
top: 0;
animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
left: 200px;
animation: slide 5s infinite;
}
#slideshow img:nth-child(3) {
left: 200px;
animation: slide 5s infinite 1.25s;
}
#slideshow img:nth-child(4) {
left: 200px;
animation: slide 5s infinite 2.5s;
}
#slideshow img:nth-child(5) {
left: 200px;
animation: slide 5s infinite 3.75s;
}
@keyframes slide {
0% {
transform: translateX(0px)
}
25% {
transform: translateX(-200px)
}
50%, 100% {
transform: translateX(-400px)
}
<div id="slideshow">
<img src="http://placehold.it/200x400/4F77AA/FFFFFF">
<img src="http://placehold.it/200x400/72A94C/FFFFFF">
<img src="http://placehold.it/200x400/A94F83/FFFFFF">
<img src="http://placehold.it/200x400/F9E934/FFFFFF">
<img src="http://placehold.it/200x400/4F77AA/FFFFFF">
</div>
解决方案3：（如果有单独的图像，则无需重复图像）
Solution 3: (no need duplicate image if you have separate images)
如果您有多个图像而不是一个像图片一样的子画面，则可以实现循环滑动动画而无需复制任何图像。以下是val答案的一种变体，其关键帧配置略为简单。 （注意：最好预先加载图像以避免黑屏，直到它们被加载。）
If you have multiple images instead of one single sprite like image, the cyclic sliding animation can be achieved without duplicating any images also. Below is a variant of vals' answer with a slightly simpler keyframe configuration. (Note: It is better to preload images to avoid blank screen till they get loaded.)
#slideshow {
position: relative;
width: 200px;
height: 400px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow img {
position: absolute;
left: 0px;
top: 0;
animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
animation-delay: 1.25s;
opacity: 0;
}
#slideshow img:nth-child(3) {
animation-delay: 2.5s;
opacity: 0;
}
#slideshow img:nth-child(4) {
animation-delay: 3.75s;
opacity: 0;
}
@keyframes slide {
0% {
transform: translateX(200px);
opacity: 1;
}
25% {
transform: translateX(0px);
opacity: 1;
}
50% {
transform: translateX(-200px);
opacity: 1;
}
50.1%,
100% {
transform: translateX(200px);
opacity: 0;
}
}
<div id="slideshow">
<img src="http://placehold.it/200x400/4F77AA/FFFFFF">
<img src="http://placehold.it/200x400/72A94C/FFFFFF">
<img src="http://placehold.it/200x400/A94F83/FFFFFF">
<img src="http://placehold.it/200x400/F9E934/FFFFFF">
</div>
这篇关于使用CSS3动画关键帧继续滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
