Slider in css not working when trying to show 6 slides - html

Question

I am trying to adapt a pen from codepen that i found but it doesn't seem to work. The pen is a text slider with 3 slides and my goal is to make it work with 6 slides.
The original codepen is this
My pen is this
The problem that i think it is is that i got the percentage wrong in my code. My code for 6 slides is
#keyframes anim-1 {
0%,
4.15% {
left: -100%;
opacity: 0;
}
4.15%,
12.45% {
left: 25%;
opacity: 1;
}
16.66%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-2 {
0%,
16.66% {
left: -100%;
opacity: 0;
}
20.75%,
29.17% {
left: 25%;
opacity: 1;
}
33.32%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-3 {
0%,
33.32% {
left: -100%;
opacity: 0;
}
37.47%,
45.83% {
left: 25%;
opacity: 1;
}
49.98%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-4 {
0%,
49.98% {
left: -100%;
opacity: 0;
}
54.13%,
62.43% {
left: 25%;
opacity: 1;
}
66.58%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-5 {
0%,
66.58% {
left: -100%;
opacity: 0;
}
70.73%,
79.03% {
left: 25%;
opacity: 1;
}
83.18%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-6 {
0%,
83.18% {
left: -100%;
opacity: 0;
}
87.33%,
95.85% {
left: 25%;
opacity: 1;
}
100% {
left: 110%;
opacity: 0;
}
}
I messed up the indentation here in this post but everything should be clearer in the codepen.
I don't think that i made any typos and i am still thinkin what could cause this.

Answer 1

In your CSS, you're not separating the different classes with a comma. Add these, and it will work.
Your Code
.item-1,
.item-2,
.item-3
.item-4
.item-5
.item-6 {
...
The Fix
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6 {
...
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6{
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;
}
.item-6{
animation-name: anim-6;
}
#keyframes anim-1 {
0%, 4.15% { left: -100%; opacity: 0; }
4.15%, 12.45% { left: 25%; opacity: 1; }
16.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 16.66% { left: -100%; opacity: 0; }
20.75%, 29.17% { left: 25%; opacity: 1; }
33.32%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 33.32% { left: -100%; opacity: 0; }
37.47%, 45.83% { left: 25%; opacity: 1; }
49.98%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 49.98% { left: -100%; opacity: 0; }
54.13%, 62.43% { left: 25%; opacity: 1; }
66.58%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-5 {
0%, 66.58% { left: -100%; opacity: 0; }
70.73%, 79.03% { left: 25%; opacity: 1; }
83.18%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-6 {
0%, 83.18% { left: -100%; opacity: 0; }
87.33%, 95.85% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>
<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>
<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-4">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-5">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-6">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
JSFiddle