A live example: https://codepen.io/cassidoo/pen/MyaWzp
Here is a small part of the whole code.
HTML
`<h1>Pure CSS3 Text Carousel</h1>`
`<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Hello, this is a quote from a person.</div>
<div class="source">- Person</div>
</li>
<li class="anim2">
<div class="quote">Hello, this is a quote from another person.</div>
<div class="source">- Another person</div>
</li>
<li class="anim3">
<div class="quote">Hello, this is a quote from an animal.</div>
<div class="source">- Animal</div>
</li>
<li class="anim4">
<div class="quote">Hello, this is a quote from a plant.</div>
<div class="source">- Plant</div>
</li>
<li class="anim5">
<div class="quote">How do ya like that.</div>
<div class="source">- Cassidy</div>
</li>
</ul>
</div>
</div>
</div>
CSS
.slider li.anim1 {
-moz-animation: cycle 60s linear infinite;
-webkit-animation: cycle 60s linear infinite;
animation: cycle 60s linear infinite;
}
*/@-moz-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
I'm trying to create more than 5 TEXT SLIDES based on the code.
But I'm having problems when I try implement the SIXTH 6TH SLIDE and so on.
The main problem here I think, are the @-WEBKIT-KEYFRAMES and @-MOZ-KEYFRAMES CYCLE math calculations. All slides work together in a sequence ONE AFTER THE OTHER.
If I copy one of the existing slide and try create the number 6, this will generate one duplicated slideshow and it will show one sequence with duplicated Frases!
Questions:
is there any KEYFRAMES CYCLE CALCULATOR or a MATH CALCULATION METHOD that I can use to do 10 slideshows or more?
is there a tool I can use to help me to do the calculation?
What should I do to increase the number of slides?
What should I implement in the code?
I want to reproduce the same effect as the example link above but with 10 slides or more. That's why I need to observe the calculation method.
I would suggest to add the common class to all the elements (.anim1, .anim2..., .anim7) which needs to be animated. I have added common class .anim. Add the animation on .anim class style and add the delay on .anim1, .anim2, ...., .anim7 class style increasing with the total animation duration.
In other words, run the same animation on all the elements with some delay.
If you want to add/remove elements for animation, you just need to do simple Math on animation-duration property. It will be animation-delay time * total elements.
See the Snippet below:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim {
animation-name: cycle;
animation-duration: 21s; /*You need to do Math here. (delay time * total elements)*/
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.anim1{
animation-delay:0s;
}
.anim2{
animation-delay:3s;
}
.anim3{
animation-delay:6s;
}
.anim4{
animation-delay:9s;
}
.anim5{
animation-delay:12s;
}
.anim6{
animation-delay:15s;
}
.anim7{
animation-delay:18s;
}
.slider:hover li {
animation-play-state: paused;
}
@keyframes cycle {
0% {
top: -325px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
18% {
top: 325px;
opacity: 0;
z-index: 0;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
100% {
top: -325px;
opacity: 0;
}
}<h1>Pure CSS3 Text Carousel</h1>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim anim1">
<div class="quote">1. Hello, this is a quote from a person.</div>
<div class="source">1 - Person</div>
</li>
<li class="anim anim2">
<div class="quote">2. Hello, this is a quote from another person.</div>
<div class="source">2 - Another person</div>
</li>
<li class="anim anim3">
<div class="quote">3. Hello, this is a quote from an animal.</div>
<div class="source">3 - Animal</div>
</li>
<li class="anim anim4">
<div class="quote">4. Hello, this is a quote from a plant.</div>
<div class="source">4 - Plant</div>
</li>
<li class="anim anim5">
<div class="quote">5. How do ya like that.</div>
<div class="source">5 - Cassidy</div>
</li>
<li class="anim anim6">
<div class="quote">6. How do ya like that.</div>
<div class="source">6 - Cassidy</div>
</li>
<li class="anim anim7">
<div class="quote">7. How do ya like that.</div>
<div class="source">7 - Cassidy</div>
</li>
</ul>
</div>
</div>
</div>