Add two more items to animated slider - css

Question

I am using a CSS3 text slider that was made for 3 lines of text. I wish to add two more lines but cannot figure out how to recalculate keyframes.
I added the additional items in CSS, but do not know how to recalculate the keyframes.
Any help is greatly appreciated!
HTML:
<p class="item-1">Text Line 1</p>
<p class="item-2">Text Line 2</p>
<p class="item-3">Text Line 3</p>
<p class="item-4">Text Line 4</p>
<p class="item-5">Text Line 5</p>
CSS:
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
font-family: 'Suez One';
font-size: 72px;
line-height: 80px;
color: white !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 8px 8px 3px #000000;
position: absolute;
display: block;
width: 60%;
z-index: 1001;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.item-1{
-webkit-animation-name: anim-1;
animation-name: anim-1;
}
.item-2{
-webkit-animation-name: anim-2;
animation-name: anim-2;
}
.item-3{
-webkit-animation-name: anim-3;
animation-name: anim-3;
}
.item-4{
-webkit-animation-name: anim-4;
animation-name: anim-4;
}
.item-5{
-webkit-animation-name: anim-5;
animation-name: anim-5;
}
#-webkit-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-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#-webkit-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-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
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; }
}
#-webkit-keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
When posting this question I got an error message "It looks like your post is mostly code, please add more details" That's why I am typing this. Trying to have some more words so it will let me post this question. Thanks for your patience.

Answer 1

Here's a script that writes the animation on the fly, based on number of slides:
'use strict';
var slider = document.querySelector('.css-slider'),
slides = slider.querySelectorAll('p'),
css = '';
for (var i = 0; i < slides.length; i++) {
css += '.css-slider>*:nth-child(' + (i + 1) + '){animation-name:a-' + i + '}' + ('#keyframes a-' + i + '{') + ('0%,' + i * 100 / slides.length + '%{transform: translatex(-100%)}') + (i * 100 / slides.length + 25 / slides.length + '%,' + ((i + 1) * 100 / slides.length - 25 / slides.length) + '%{transform: translatex(0)}') + ((i + 1) * 100 / slides.length + '%,100%{transform: translatex(100%)}') + '}';
}
css += '.css-slider>*{animation-duration:' + slides.length * 4 + 's;';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
#import url('https://fonts.googleapis.com/css?family=Suez+One');
.css-slider > * {
font-family: 'Suez One';
font-size: 72px;
line-height: 55px;
color: white;
text-shadow: 5px 5px 3px rgba(0,0,0,.65);
position: absolute;
top: 0;
width: 100%;
text-align: center;
animation-timing-function: cubic-bezier(.4,0,.2,1);
animation-iteration-count: infinite;
}
.css-slider, .css-slider > *:last-child {
position: relative;
}
.css-slider {
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0;
overflow-x: hidden;
}
<div class="css-slider">
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
<p>Text Line 4</p>
<p>Text Line 5</p>
<p>Text Line 6</p>
<p>Text Line 7</p>
</div>
Note I changed your initial markup, as I wanted it to write a more general solution, not one tailored to your particular case.
But if you're only interested in the CSS for 5 items and you want to keep your markup here's what you're asking for:
.item-1 { -webkit-animation-name: a-0; animation-name: a-0 }
.item-2 { -webkit-animation-name: a-1; animation-name: a-1 }
.item-3 { -webkit-animation-name: a-2; animation-name: a-2 }
.item-4 { -webkit-animation-name: a-3; animation-name: a-3 }
.item-5 { -webkit-animation-name: a-4; animation-name: a-4 }
#-webkit-keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
And the principle behind the keyframes is:
.item-${n+1} { animation-name: a-${n} }
#keyframes a-${n} {
0%, enterStart { left state ruleset }
enterEnd, leaveStart { center state ruleset }
leaveEnd, 100% { right state ruleset }
}