Delay in infinite fade in & out CSS3 animation - html

Question

I am working on the below:
Fiddle Code
Here is HTML:
<div id="animation">
<ul>
<li>this is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
This is the CSS:
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate;
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation:fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) {
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) {
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate;
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
I am new to CSS3 and with the code I want to stick paragraphs in instead of a couple of words. My question is, when the text fades in, how can you keep it on the screen for eg 10 seconds so someone can read it and the fade out into the next paragraph.
I have used duration and delay, doesn't really seem to work the way I wanted. Any help will be great.

Answer 1

The approach is really simple but you would need to do math as mentioned in Paulie_D's comment. I would leave the choice on whether to use it or not to you. Personally, I don't see anything wrong with this approach or any complexity provided the no. of elements to be faded in/out is static.
The overall approach is as follows:
We have 3 elements/paragraphs and for the example purpose I am going to make them fade-in for the first 3 seconds, stay as-is for the next 10 seconds and fade out for the last. So, for each element we need a total of 16 seconds in animation time.
While the first element has completed its animation and the second or third is being animated, the previous ones should hold the final state (that is faded out). To achieve this, the following need to be done:
Set the animation-duration for all elements such that it is the sum total of animation times for all elements. Here it would be 3*16s = 48s.
Set the keyframes such that each element would remain idle for 32s of the total duration because during this 32s gap the other two elements would be doing their animation. This is achieved by completing the fade-in, the stay and the fade-out all together within 33% of the animation's total duration.
Set animation-delay of second element to be 16s (because it has to start after the first one is completed) and that for the third to be 32s (because first two should complete).
Coming to the keyframes rule itself, as I said earlier the whole animation for one element should complete within 33% of the full duration. So at 6.25% (roughly 3s mark), we fade the element in and then till 26.75% (which is till 13s mark) we make it be at opacity: 1 and then at 33% (that is 16s mark) we completely fade it out.
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
animation: fadein 48s ease-in-out infinite;
}
#animation li:nth-of-type(2) {
animation: fadein 48s ease-in-out 16s infinite;
}
#animation li:nth-of-type(3) {
animation: fadein 48s ease-in-out 32s infinite;
}
#keyframes fadein {
0% {
opacity: 0;
}
6.25% { /* 3s for fade in */
opacity: 1;
}
26.75% { /* roughly 10s for stay as-is */
opacity: 1;
}
33% { /* 3s for fade out */
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>

Answer 2

The basic CSS code for this example looks like this:
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay.
At the end of the fade-out transition, we want to remove the hidden element from the flow, so that it does not leave a blank space in the middle of the page. Sadly we don’t have many options here:
display:none doesn’t work because it will be applied instantly, and
trying to delay it like we did with visibility won’t work;
position:absolute has the exact same issue;
It’s not ideal, but we can use margin-top (it can be transitioned and
thus delayed).
In order to use margin-top to hide the element, we need to have a slightly richer HTML structure:
<div class="visible">
<div>…</div>
</div>
And our CSS code becomes more complex:
.visible,
.hidden {
overflow: hidden;
/* This container should not have padding, borders, etc. */
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
/* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
margin-top: -10000px;
transition: margin-top 0s 2s;
}