为什么这个CSS动画无限自动旋转木马跳转项目重置？ [英] Why does this css animated Infinite autoplay carousel jump when the items reset?
本文介绍了为什么这个CSS动画无限自动旋转木马跳转项目重置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在根据此示例创建一个无限自动播放轮播： https：// codepen .io / jackoliver / pen / qVbQqW
请注意codepen示例的顺利程度，它在转盘从最后一个项目重置为第一个项目时不会跳转。 / p>
矿井不太顺利 - 矿井正在重置，我不知道为什么...
body {align-items：center;背景：＃E3E3E3;显示：flex;身高：100vh; justify-content：center;} @ keyframes scroll {0％{transform：translateX（0）; } 100％{transform：translateX（calc（-456px * 2））; }}。quotes-famous {background：white; box-shadow：0 10px 20px -5px rgba（0，0，0，0.125）;身高：500px;保证金：汽车;溢出：隐藏;位置：相对; width：960px;}。quotes-famous :: before，.quotes-famous :: after {background：linear-gradient（to right，white 0％，rgba（255,255,255，0）100％）;内容：;身高：500px;位置：绝对;宽度：200px; z-index：2;}。quotes-famous :: after {right：0; top：0; transform：rotateZ（180deg）;}。quotes-famous :: before {left：0; top：0;}。quotes-famous__track {animation：scroll 1s linear infinite;显示：flex; width：calc（456px * 4）;}。quotes-famous__quote {background：#efefef;身高：500px; width：456px;}
< div class =quotes -famous> < div class =quotes-famous__track> < div class =quotes-famous__quote> < p class =quotes-famous__text>在lorem sollicitudin的quisque，elementum justo a，dictum tortor。 Donec dapibus elementum augue，in imperdiet lorem posuere nec。 Sed scelerisque scelerisque imperdiet。 < / p为H. < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Phasellus dictum leo enim，a dignissim erat vestibulum at。 sevitae libero id mauris ullamcorper elementum。 Praesent at accumsan ipsum。 Quisque坐在amet posuere mauris。 Proin ac阴道炎，quis faucibus sem。 Cras nec consectetur neque。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Sed sagittis ligula ut est faucibus egestas。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Fusce convallis，risus et luctus tempus，urna orci accumsan tortor，accumsan euismod arcu lectus vitae neque。 Nulla tincidunt，augue nonfficitur euismod，nunc diam feugiat turpis，convallis lacinia velit enim et nisl。 sed在suscipit augue。 Curabitur sed dolor metus。 Nunc augue eros，aliquet sed mi ac，pulvinar fermentum mauris。 Cras condimentum sapien tellus，nec efficitur odio imperdiet vitae。< / p> < / DIV> < / div>< / div>
解决方案
body {align-items：center;背景：＃E3E3E3;显示：flex;身高：100vh; justify-content：center;} @ keyframes scroll {0％{transform：translateX（0）; } 100％{transform：translateX（calc（-456px * 2））; }}。quotes-famous {background：white; box-shadow：0 10px 20px -5px rgba（0，0，0，0.125）;身高：500px;保证金：汽车;溢出：隐藏;位置：相对; width：960px;}。quotes-famous :: before，.quotes-famous :: after {background：linear-gradient（to right，white 0％，rgba（255,255,255，0）100％）;内容：;身高：500px;位置：绝对;宽度：200px; z-index：2;}。quotes-famous :: after {right：0; top：0; transform：rotateZ（180deg）;}。quotes-famous :: before {left：0; top：0;}。quotes-famous__track {animation：scroll 4s linear infinite;显示：flex; width：calc（456px * 4）;}。quotes-famous__quote {background：#efefef;身高：500px; width：456px;}
< div class =quotes -famous> < div class =quotes-famous__track> < div class =quotes-famous__quote> < p class =quotes-famous__text>在lorem sollicitudin的quisque，elementum justo a，dictum tortor。 Donec dapibus elementum augue，in imperdiet lorem posuere nec。 Sed scelerisque scelerisque imperdiet。 < / p为H. < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Phasellus dictum leo enim，a dignissim erat vestibulum at。 sevitae libero id mauris ullamcorper elementum。 Praesent at accumsan ipsum。 Quisque坐在amet posuere mauris。 Proin ac阴道炎，quis faucibus sem。 Cras nec consectetur neque。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Sed sagittis ligula ut est faucibus egestas。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Fusce convallis，risus et luctus tempus，urna orci accumsan tortor，accumsan euismod arcu lectus vitae neque。 Nulla tincidunt，augue nonfficitur euismod，nunc diam feugiat turpis，convallis lacinia velit enim et nisl。 sed在suscipit augue。 Curabitur sed dolor metus。 Nunc augue eros，aliquet sed mi ac，pulvinar fermentum mauris。 Cras condimentum sapien tellus，nec efficitur odio imperdiet vitae。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text>在lorem sollicitudin的quisque，elementum justo a，dictum tortor。 Donec dapibus elementum augue，in imperdiet lorem posuere nec。 Sed scelerisque scelerisque imperdiet。 < / p为H. < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Phasellus dictum leo enim，a dignissim erat vestibulum at。 sevitae libero id mauris ullamcorper elementum。 Praesent at accumsan ipsum。 Quisque坐在amet posuere mauris。 Proin ac阴道炎，quis faucibus sem。 Cras nec consectetur neque。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Sed sagittis ligula ut est faucibus egestas。< / p> < / DIV> < div class =quotes-famous__quote> < p class =quotes-famous__text> Fusce convallis，risus et luctus tempus，urna orci accumsan tortor，accumsan euismod arcu lectus vitae neque。 Nulla tincidunt，augue nonfficitur euismod，nunc diam feugiat turpis，convallis lacinia velit enim et nisl。 sed在suscipit augue。 Curabitur sed dolor metus。 Nunc augue eros，aliquet sed mi ac，pulvinar fermentum mauris。 Cras condimentum sapien tellus，nec efficitur odio imperdiet vitae。< / p> < / DIV> < / div>< / div>
I'm working to create an infinite autoplay carousel based on the example here: https://codepen.io/jackoliver/pen/qVbQqW
Notice how smooth the codepen example is, it never jumps when the carousel resets from the last to first item.
Mine is less smooth - Mine is jumping on reset and I can't figure out why...
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 1s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
解决方案
The codepen example doubles up on all the images (or quotes in your case).
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-456px * 2));
}
}
.quotes-famous {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 500px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 500px;
position: absolute;
width: 200px;
z-index: 2;
}
.quotes-famous::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
.quotes-famous::before {
left: 0;
top: 0;
}
.quotes-famous__track {
animation: scroll 4s linear infinite;
display: flex;
width: calc(456px * 4);
}
.quotes-famous__quote {
background: #efefef;
height: 500px;
width: 456px;
}
<div class="quotes-famous">
<div class="quotes-famous__track">
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
</div>
<div class="quotes-famous__quote">
<p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
</div>
</div>
</div>
这篇关于为什么这个CSS动画无限自动旋转木马跳转项目重置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
