У меня есть слайдер, который содержит 3 элемента, в котором все работает хорошо, как я хочу
здесь живая демонстрация рабочая демонстрация
Текстовый слайдер с 3 элементами
HTML
<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>
Css
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%,
8.3% {
top: -100%;
opacity: 0;
}
8.3%,
25% {
top: 25%;
opacity: 1;
}
33.33%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
33.33% {
top: -100%;
opacity: 0;
}
41.63%,
58.29% {
top: 25%;
opacity: 1;
}
66.66%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
66.66% {
top: -100%;
opacity: 0;
}
74.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
Теперь я хочу добавить еще два элемента к слайдеру
HTML
<span class="item-1">FAST.</span>
<span class="item-2">SIMPLE.</span>
<span class="item-3">PERSONAL.</span>
<span class="item-4">SOCIAL.</span>
<span class="item-5">LOUD.</span>
Css
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3,
.item-4,
.item-5{
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
.item-4{
animation-name: anim-4;
}
.item-5{
animation-name: anim-5;
}
@keyframes anim-1 {
0%,
6.3% {
top: -100%;
opacity: 0;
}
6.3%,
25% {
top: 25%;
opacity: 1;
}
13.33%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
23.33% {
top: -100%;
opacity: 0;
}
31.63%,
48.29% {
top: 25%;
opacity: 1;
}
56.66%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
56.66% {
top: -100%;
opacity: 0;
}
64.96%,
71.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-4 {
0%,
71.66% {
top: -100%;
opacity: 0;
}
84.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-5 {
0%,
84.96% {
top: -100%;
opacity: 0;
}
94.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
Вот демо с пятью элементами
демо не работает
Что мне нужно изменить в моем коде?