Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее. Этот самый пример изменения слов будем создавать без применения JS, на чистом HTML CSS, где основа будет CSS анимация. HTML: 
 Код
<div class="rw-sentence">  
  <span>Заголовок, если надо</span>  
  <div class="rw-words">  
  <span>слово 1</span>  
  <span>слово 2</span>  
  <span>слово 3</span>  
  <span>слово 4</span>  
  </div>  
</div>

Соответственно, если поняли, изменяться будут слова, под классом rw-words, то есть вместо слова слово 1 вместо него появится слово 2, и так далее по кругу. 
CSS 
Сначала украсим заголовок, если он будет вам нужен: 
 Код
.rw-sentence span{  
  color: #3B86F8; /* Цвет текста */  
  font-size: 30pt; /* Размер шрифта */  
}

Теперь переходим к самим изменяющимся словам. 
 Код
.rw-words span{  
  position: absolute; /* Позиционирование */  
  opacity: 0; /* Отсутствие прозрачности */  
  overflow: hidden; /* Все лишние будет удалено */  
  width: 100%; /* Ширина */  
  color: #A4A5A4; /* Цвет текста */  
}  

.rw-words span a{  
  color: #A4A5A4; /* Цвет ссылок */  
}

Теперь что с анимацией. Если задать одну и ту же анимацию просто тегу <span>, то слова будут просто напросто накладываться друг на друга. Поэтому, придется использовать псевдокласс :nth-child, а так же задавать вручную параметры времени, когда включать анимацию. 
 Код
.rw-words span{  
  -webkit-animation: rotateWordsSecond 18s linear infinite 0s;  
  -moz-animation: rotateWordsSecond 18s linear infinite 0s;  
  -o-animation: rotateWordsSecond 18s linear infinite 0s;  
  -ms-animation: rotateWordsSecond 18s linear infinite 0s;  
  animation: rotateWordsSecond 18s linear infinite 0s;  
}  

.rw-words span:nth-child(2) {  
  -webkit-animation-delay: 3s;  
  -moz-animation-delay: 3s;  
  -o-animation-delay: 3s;  
  -ms-animation-delay: 3s;  
  animation-delay: 3s;  
}  
.rw-words span:nth-child(3) {  
  -webkit-animation-delay: 6s;  
  -moz-animation-delay: 6s;  
  -o-animation-delay: 6s;  
  -ms-animation-delay: 6s;  
  animation-delay: 6s;  
}  
.rw-words span:nth-child(4) {  
  -webkit-animation-delay: 9s;  
  -moz-animation-delay: 9s;  
  -o-animation-delay: 9s;  
  -ms-animation-delay: 9s;  
  animation-delay: 9s;  
}

А так же параметры анимации под все браузеры: 
 Код
@-webkit-keyframes rotateWordsSecond {  
  0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-moz-keyframes rotateWordsSecond {  
  0% { opacity: 1; -moz-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-o-keyframes rotateWordsSecond {  
  0% { opacity: 1; -o-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@-ms-keyframes rotateWordsSecond {  
  0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}  
@keyframes rotateWordsSecond {  
  0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }  
  10% { opacity: 0.3; width: 0px; }  
  20% { opacity: 1; width: 100%; }  
  27% { opacity: 0; width: 100%; }  
  100% { opacity: 0; }  
}

готово!