Why does the animation twitch and get back to its original position instead of continuing?

Question

.header_mid { height: 100px; } .header_mid .logo_slide { padding: 25px 0; height: 50px; overflow: hidden; position: relative; } .header_mid .logo_slide ul { display: block; width: 200%; height: 50px; position: absolute; overflow: hidden; animation: marquee 10s linear infinite; } .header_mid .logo_slide .logo_item { height: 50px; padding: 0 20px; float: left; } @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } .header_mid .logo_slide ul:hover { animation-play-state: paused; }

 <div class="header_mid"> <div class="logo_slide"> <ul> <li class="logo_item"> <a href="https://www.webmoney.ru/"> <img src="https://satyr.io/150x50/1" alt="WebMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://perfectmoney.is/"> <img src="https://satyr.io/150x50/2" alt="PerfectMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://qiwi.com/"> <img src="https://satyr.io/150x50/3" alt="Qiwi logo" /> </a> </li> <li class="logo_item"> <a href="https://money.yandex.ru/"> <img src="https://satyr.io/150x50/4" alt="YandexMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://www.okpay.com/ru/"> <img src="https://satyr.io/150x50/5" alt="OkPay logo" /> </a> </li> <li class="logo_item"> <a href="https://advcash.com/"> <img src="https://satyr.io/150x50/6" alt="ADVcash logo" /> </a> </li> <li class="logo_item"> <a href="https://www.paypal.com/"> <img src="https://satyr.io/150x50/7" alt="PayPal logo" /> </a> </li> <li class="logo_item"> <a href="https://payeer.com/ru/"> <img src="https://satyr.io/150x50/8" alt="Payeer logo" /> </a> </li> <li class="logo_item"> <a href="https://bitcoin.org/ru/"> <img src="https://satyr.io/150x50/9" alt="Bitcoin logo" /> </a> </li> <li class="logo_item"> <a href="https://www.onecoin.eu/"> <img src="https://satyr.io/150x50/10" alt="OneCoin logo" /> </a> </li> <li class="logo_item"> <a href="https://www.swiscoin.com/"> <img src="https://satyr.io/150x50/11" alt="SwisCoin logo" /> </a> </li> </ul> </div> <div class="clear"></div> </div>

I have a crawl line with logos, but by the time the first cycle is completed and the second one begins, the animation is twitching and gets into its original position. I do not understand how to solve this problem.

Marquee must be made without using js and must be rubber.
Javascript is an extreme option.

Here is a link to my running line .

@EatMyDust look until the end of the animation and understand.

IVsevolod IVsevolod 6.369 3 20 45 · Answer 1 · 2016-06-15T13:02:01

The problem is to set the width.

In the example, the 7th element goes under the first one, so it visually throws it onto the 1st element. If you expand the block, it will continue to turn.

I am sure that it is bad to set the width in% in this way.

 .header_mid { height: 100px; } .header_mid .logo_slide { padding: 25px 0; height: 50px; overflow: hidden; position: relative; } .header_mid .logo_slide ul { display: block; width: 350%; height: 50px; position: absolute; overflow: hidden; animation: marquee 10s linear infinite; } .header_mid .logo_slide .logo_item { height: 50px; padding: 0 20px; float: left; } @keyframes marquee { 0% { left: 0; } 100% { left: -250%; } } .header_mid .logo_slide ul:hover { animation-play-state: paused; }

  <div class="header_mid"> <div class="logo_slide" > <ul> <li class="logo_item"><a href="https://www.webmoney.ru/"><img src="/images/logos/wm.png" alt="WebMoney logo1" /></a> <li class="logo_item"><a href="https://perfectmoney.is/"><img src="/images/logos/perfect-money.png" alt="PerfectMoney logo2" /></a> <li class="logo_item"><a href="https://qiwi.com/"><img src="/images/logos/qiwi.png" alt="Qiwi logo3" /></a> <li class="logo_item"><a href="https://money.yandex.ru/"><img src="/images/logos/yandex.png" alt="YandexMoney logo4" /></a> <li class="logo_item"><a href="https://www.okpay.com/ru/"><img src="/images/logos/okpay.png" alt="OkPay logo5" /></a> <li class="logo_item"><a href="https://advcash.com/"><img src="/images/logos/advcash.png" alt="ADVcash logo6" /></a> <li class="logo_item"><a href="https://www.paypal.com/"><img src="/images/logos/paypal.png" alt="PayPal logo7" /></a> <li class="logo_item"><a href="https://payeer.com/ru/"><img src="/images/logos/payeer.png" alt="Payeer logo8" /></a> <li class="logo_item"><a href="https://bitcoin.org/ru/"><img src="/images/logos/bitcoin.png" alt="Bitcoin logo9" /></a> <li class="logo_item"><a href="https://www.onecoin.eu/"><img src="/images/logos/onecoin.png" alt="OneCoin logo10" /></a> <li class="logo_item"><a href="https://www.swiscoin.com/"><img src="/images/logos/swiscoin.png" alt="SwisCoin logo11" /></a> </ul> </div> <div class="clear"></div> </div>

http://jsfiddle.net/tfsc3qkp/6/

I still do not understand what the author wants, it's not beautiful when, when finished, she twitches and gets back to the starting position
We duplicate the list and adjust the animation parameters so that the new animation launch takes place exactly at the moment when the double leaves.
@Doofy, well, if you know a solution without js better, I’ll be happy to see

Shuhratjon Jumaev Shuhratjon Jumaev 555 3 nineteen · Accepted Answer · 2016-07-27T06:52:43

Much time has passed since the question was published, but I never wrote a solution. The decisions turned out to be bony. Based on the user's comments @ Duck, it was decided to duplicate the list and adjust the animation parameters so that the new animation launch takes place exactly at the moment when the double leaves. All this with a fixed list width.

 .header_mid { height: 100px; } .header_mid .logo_slide { padding: 25px 0; height: 50px; overflow: hidden; position: relative; width:100%; margin: auto; } .loop, .loop-clone { display: block; -width: 200%; width:1510px; height: 50px; position: absolute; overflow: hidden; } .loop { animation: marquee 60s linear infinite; } .loop-clone { animation: marquee-clone 60s linear infinite; } .header_mid .logo_slide .logo_item { height: 50px; padding: 0 20px; float: left; } @keyframes marquee { 0% { left: 0; } 50% { left: -1510px; } 50.001% { left: 1510px; } 100% { left: 0; } } @keyframes marquee-clone { 0% { left: 1510px; } 50% { left: 0; } 100% { left: -1510px; } } .header_mid .logo_slide:hover ul,.header_mid .logo_slide .loop-clone ul { animation-play-state: paused; }

 <div class="header_mid"> <div class="logo_slide"> <ul class="loop"> <li class="logo_item"><a href="https://perfectmoney.is/"><img src="/images/logos/perfect-money.png" alt="PerfectMoney logo" /></a> <li class="logo_item"><a href="https://qiwi.com/"><img src="/images/logos/qiwi.png" alt="Qiwi logo" /></a> <li class="logo_item"><a href="https://money.yandex.ru/"><img src="/images/logos/yandex.png" alt="YandexMoney logo" /></a> <li class="logo_item"><a href="https://www.okpay.com/ru/"><img src="/images/logos/okpay.png" alt="OkPay logo" /></a> <li class="logo_item"><a href="https://advcash.com/"><img src="/images/logos/advcash.png" alt="ADVcash logo" /></a> <li class="logo_item"><a href="https://www.paypal.com/"><img src="/images/logos/paypal.png" alt="PayPal logo" /></a> <li class="logo_item"><a href="https://payeer.com/ru/"><img src="/images/logos/payeer.png" alt="Payeer logo" /></a> <li class="logo_item"><a href="https://bitcoin.org/ru/"><img src="/images/logos/bitcoin.png" alt="Bitcoin logo" /></a> <li class="logo_item"><a href="https://www.onecoin.eu/"><img src="/images/logos/onecoin.png" alt="OneCoin logo" /></a> <li class="logo_item"><a href="https://www.swiscoin.com/"><img src="/images/logos/swiscoin.png" alt="SwisCoin logo" /></a> </ul> <ul class="loop-clone"> <li class="logo_item"><a href="https://perfectmoney.is/"><img src="/images/logos/perfect-money.png" alt="PerfectMoney logo" /></a> <li class="logo_item"><a href="https://qiwi.com/"><img src="/images/logos/qiwi.png" alt="Qiwi logo" /></a> <li class="logo_item"><a href="https://money.yandex.ru/"><img src="/images/logos/yandex.png" alt="YandexMoney logo" /></a> <li class="logo_item"><a href="https://www.okpay.com/ru/"><img src="/images/logos/okpay.png" alt="OkPay logo" /></a> <li class="logo_item"><a href="https://advcash.com/"><img src="/images/logos/advcash.png" alt="ADVcash logo" /></a> <li class="logo_item"><a href="https://www.paypal.com/"><img src="/images/logos/paypal.png" alt="PayPal logo" /></a> <li class="logo_item"><a href="https://payeer.com/ru/"><img src="/images/logos/payeer.png" alt="Payeer logo" /></a> <li class="logo_item"><a href="https://bitcoin.org/ru/"><img src="/images/logos/bitcoin.png" alt="Bitcoin logo" /></a> <li class="logo_item"><a href="https://www.onecoin.eu/"><img src="/images/logos/onecoin.png" alt="OneCoin logo" /></a> <li class="logo_item"><a href="https://www.swiscoin.com/"><img src="/images/logos/swiscoin.png" alt="SwisCoin logo" /></a> </ul> </div> <div class="clear"></div> </div>

Answer 3 · 2016-06-15T12:45:24

 .header_mid { display: block; width: 100%; white-space: nowrap; overflow: hidden; } .logo_item { display: inline-block; } .logo_slide { display: inline-block; padding-left: 100%; animation: scroll 4s infinite linear; } @keyframes scroll { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

 <div class="header_mid"> <div class="logo_slide"> <ul> <li class="logo_item"> <a href="https://www.webmoney.ru/"> <img src="https://satyr.io/150x50/1" alt="WebMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://perfectmoney.is/"> <img src="https://satyr.io/150x50/2" alt="PerfectMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://qiwi.com/"> <img src="https://satyr.io/150x50/3" alt="Qiwi logo" /> </a> </li> <li class="logo_item"> <a href="https://money.yandex.ru/"> <img src="https://satyr.io/150x50/4" alt="YandexMoney logo" /> </a> </li> <li class="logo_item"> <a href="https://www.okpay.com/ru/"> <img src="https://satyr.io/150x50/5" alt="OkPay logo" /> </a> </li> <li class="logo_item"> <a href="https://advcash.com/"> <img src="https://satyr.io/150x50/6" alt="ADVcash logo" /> </a> </li> <li class="logo_item"> <a href="https://www.paypal.com/"> <img src="https://satyr.io/150x50/7" alt="PayPal logo" /> </a> </li> <li class="logo_item"> <a href="https://payeer.com/ru/"> <img src="https://satyr.io/150x50/8" alt="Payeer logo" /> </a> </li> <li class="logo_item"> <a href="https://bitcoin.org/ru/"> <img src="https://satyr.io/150x50/9" alt="Bitcoin logo" /> </a> </li> <li class="logo_item"> <a href="https://www.onecoin.eu/"> <img src="https://satyr.io/150x50/10" alt="OneCoin logo" /> </a> </li> <li class="logo_item"> <a href="https://www.swiscoin.com/"> <img src="https://satyr.io/150x50/11" alt="SwisCoin logo" /> </a> </li> </ul> </div> <div class="clear"></div> </div>

It is not entirely clear what is needed for the animation to finish to the end and recover abruptly or need repetition
Yes, it is necessary that the cycle continues indefinitely and without an empty area between the first and second and so on cycle
@Doofy, well, what kind of "overclocking due to external resources loading"?
Did you figure out what you wrote yourself? (The empty area is due to the fact that the animation is re-launched.
There is an idea how to fix it "without js", described the comments in the post above.

Why does the animation twitch and get back to its original position instead of continuing?

3 answers 3

More articles: