Почему анимация дёргается и встаёт в исходное положение вместо того, чтобы продолжаться?

#html #css #css3

.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;
}

  

    

      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
      

        
          
        
      
    
  
  






У меня есть бегущая строка с логотипами, но к моменту завершения первого цикла и
начала второго, анимация дёргается и встаёт в исходное положение. Не понимаю, как решить
эту проблему.  

Бегущая строка должна быть сделана без использования js и должна быть резиновой.
Javascript крайний вариант.   

Вот ссылка на мою бегущую строку.
    

Ответы

Ответ 1

Проблема в установке ширины.

В примере 7-ой элемент идет под первым, поэтому он визуально перекидывает на 1-ый
элемент. Если расширить блок, то он дальше будет крутить. 

Уверен, что задавать ширину в % таким способом есть плохо.



.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;
}
   

      

          

            

            

            

            

            

            

            

            

            

            

            

          
      
      

    




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


Ответ 2

Прошло много времени с момента публикации вопроса, а я так и не написал решение.
Решения оказалось костлявым. Исходя из комментариев пользователя @Утка было решено
дублировать список и подогнать параметры анимации так, чтобы новый запуск анимации
происходил ровно в тот момент, когда выезжает дубль. Все это с фиксированной шириной
списка.



.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;
}

      

          

            

            

            

            

            

            

            

            

            

            

          
          

            

            

            

            

            

            

            

            

            

            

          
      
      

    


Ответ 3

.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); }
}