CSS Text Slideshow - html

Question

I found a snippet that I want to use for my website. The Snippet is a Text Slider with 3 Boxes. You can see it here:
#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 {
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% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { 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>
But for my Project i need 4 textboxes. I tryed to adust the script, but I have on error which I don't understand why. If I add another textbox, adjust the class of the textbox, edit the css and adjust the timings of the textboxes, the slide effect is working well until the last (the new added) slide comes up. Then the first line shows up, even if the last slide is not finished. Can anyobody help me to find out what I am doing wrong?
#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 {
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;
}
#keyframes anim-1 {
0%, 6.5% { left: -100%; opacity: 0; }
6.5%,18.5% { left: 25%; opacity: 1; }
25%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 25% { left: -100%; opacity: 0; }
31.5%, 43.5% { left: 25%; opacity: 1; }
50%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 75% { left: -100%; opacity: 0; }
81.5%, 93.5% { 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">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>
Greetings

Answer 1

The problem there is define the animation steps, if You look to the CSS there is one keyframe defined with percentage, how to split the animation. Like:
#keyframes anim {
0%, 6.5% { left: -100%; opacity: 0; }
6.5%,18.5% { left: 25%; opacity: 1; }
25%, 100% { left: 110%; opacity: 0; }
}
The percentage at the start of line is saying:
Go from FIRST VALUE to SECOND VALUE and end there (follow by next line).
If You look at keyframe 3, You haven't defined the latest value in percentage, so if You add it, it will work well. Full code below.
From:
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75% { left: 110%; opacity: 0; }
}
To:
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75%, 100% { left: 110%; opacity: 0; }
}
#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 {
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;
}
#keyframes anim-1 {
0%, 6.5% { left: -100%; opacity: 0; }
6.5%,18.5% { left: 25%; opacity: 1; }
25%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 25% { left: -100%; opacity: 0; }
31.5%, 43.5% { left: 25%; opacity: 1; }
50%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 75% { left: -100%; opacity: 0; }
81.5%, 93.5% { 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">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

Answer 2

Small change in your code. You missed second params in anim-3 keyframes to remove this text from screen
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75%, 100% { left: 110%; opacity: 0; }
}
#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 {
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;
}
#keyframes anim-1 {
0%, 6.5% { left: -100%; opacity: 0; }
6.5%,18.5% { left: 25%; opacity: 1; }
25%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 25% { left: -100%; opacity: 0; }
31.5%, 43.5% { left: 25%; opacity: 1; }
50%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 50% { left: -100%; opacity: 0; }
56.5%, 68.5% { left: 25%; opacity: 1; }
75%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 75% { left: -100%; opacity: 0; }
81.5%, 93.5% { 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">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>