Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее. Этот самый пример изменения слов будем создавать без применения 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; }
}
готово!
