CSS Анимация прокрутка текста по кругу

setInterval(function() { 
  $(".active").prev().removeClass('active stap2 ').addClass('active2'); 
  $(".active").prev().removeClass('stap1'); 
  $(".active").prev().addClass('stap2'); 
  $(".active").addClass('stap1'); 
  $(".active").next().addClass('active'); 
  clearInterval(); 
}, 2000);

@keyframes example { 
  0% { 
    left: 50px; 
    top: 0px; 
  } 
  100% { 
    left: 100px; 
    top: 50px; 
  } 
} 
@keyframes example2 { 
  0% { 
    top: 50px; 
    left: 100px; 
  } 
  100% { 
    top: 100px; 
    left: 50px; 
  } 
} 
@keyframes enter { 
  0% { 
    left: -50px; 
  } 
  100% { 
    left: 50px; 
  } 
} 
@keyframes out { 
  0% { 
    left: 50px; 
    top: 100px; 
  } 
  100% { 
    left: -100px; 
    top: 100px; 
  } 
} 
.scrolls { 
  list-style: none; 
} 
.start { 
  position: absolute; 
  display: none; 
} 
.active { 
  display: block; 
  left: 0; 
  top: 0; 
  animation-name: enter; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
} 
.active2 { 
  display: block; 
  animation-name: out; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
} 
.stap1 { 
  animation-name: example; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
} 
.stap2 { 
  animation-name: example2; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ui class="scrolls"> 
  <li class="start active ">World 1</li> 
  <li class="start ">World 2</li> 
  <li class="start">World 3</li> 
  <li class="start">World 4</li> 
  <li class="start">World 5</li> 
  <li class="start">World 6</li> 
  <li class="start">World 7</li> 
  <li class="start">World 8</li> 
  <li class="start">World 9</li> 
  <li class="start">World 10</li> 
  <li class="start">World 11</li> 
</ui>

html { 
  overflow: hidden; 
} 
 
body { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  right: 0; 
  bottom: 0; 
  animation: rot 10s linear infinite; 
  transform-origin: 0 0; 
} 
 
div { 
  position: absolute; 
  top: 0; 
  left: 0; 
  transform: rotate(36deg); 
  transform-origin: 0 0; 
} 
 
span { 
  padding-left: 3em; 
  white-space: nowrap; 
} 
 
@keyframes rot { 
  from { transform: rotate(0) } 
  to { transform: rotate(1turn) } 
}

<div><span>Слово 1</span> 
  <div><span>Слово 2</span> 
    <div><span>Слово 3</span> 
      <div><span>Слово 4</span> 
        <div><span>Слово 5</span> 
          <div><span>Слово 6</span> 
            <div><span>Слово 7</span> 
              <div><span>Слово 8</span> 
                <div><span>Слово 9</span> 
                  <div><span>Слово 10</span> 
</div></div></div></div></div></div></div></div></div></div>

var array = [ 
  'Слово 1', 
  'Слово 2', 
  'Слово 3', 
  'Слово 4', 
  'Слово 5', 
  'Слово 6', 
  'Слово 7', 
  'Слово 8', 
  'Слово 9', 
  'Слово 10' 
]; 
var count = 0; 
var word = document.querySelectorAll('.one-word')[0]; 
console.log(word) 
word.innerHTML = array[count]; 
setInterval(function() { 
	if(count != array.length - 1) { 
		count++ 
  } else { 
  	count = 0; 
  } 
  word.innerHTML = array[count]; 
},1000); 
 
setInterval(function() { 
	if(word.className == 'one-word') { 
  	word.className = 'one-word hide' 
  } else if(word.className == 'one-word hide') { 
  	word.className = 'one-word hide-2' 
  } else if(word.className == 'one-word hide-2') { 
  	word.className = 'one-word show' 
  } else if(word.className == 'one-word show') { 
  	word.className = 'one-word show-2' 
  } else if(word.className == 'one-word show-2') { 
  	word.className = 'one-word' 
  } 
},200);

body { 
  margin: 0; 
  padding: 0; 
} 
.wrapper { 
  position: absolute; 
  text-align: center; 
  width: 100%; 
  height: 100%; 
} 
.wrapper:before { 
  content: ""; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle; 
} 
.words { 
  position: relative; 
  display: inline-block; 
  color: #868686; 
  overflow: hidden; 
  vertical-align: middle; 
} 
.one-word { 
  display: inline-block; 
  position: relative; 
  padding: 12px; 
  left: 0; 
  right: 0; 
  -webkit-transition: ease-in-out 0.2s; 
  -moz-transition: ease-in-out 0.2s; 
  -o-transition: ease-in-out 0.2s; 
  -ms-transition: ease-in-out 0.2s; 
  transition: ease-in-out 0.2s; 
} 
.one-word.hide { 
  left: -100%; 
} 
.one-word.hide-2 { 
  left: auto; 
  right: -100%; 
  display: none; 
} 
.one-word.show { 
  left: auto; 
  right: -100%; 
  opacity: 1; 
  display: block; 
} 
.one-word.show-2 { 
  left: auto; 
  right: 0; 
  opacity: 1; 
} 
 
.background-color: #FFFFFF;

<div class="wrapper"> 
  <div class="words"> 
    <div class="one-word"></div> 
  </div> 
</div>