The never-ending delay of an infinite fade in and out CSS3 animation

Question

The never-ending delay of an infinite fade in and out CSS3 animation

I am currently working on the following:

This is the HTML structure being used:

<div id="animation">
  <ul>
    <li>this is</li>
    <li>CSS3 looped</li>
    <li>animation</li>
  </ul>
</div>

Here is the CSS for the animation:

#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;
    }
}

As I am relatively new to CSS3, my goal is to have paragraphs instead of single words fadeIn and stay on the screen for a certain amount of time before fading out into the next paragraph. Unfortunately, using duration and delay properties didn't give me the desired result. Any insights or help on achieving this effect would be greatly appreciated.

html css css-animations

Answer 1

Answer №1

The concept is quite straightforward, requiring some basic mathematical calculations as suggested in the comment by Paulie_D. The decision of whether or not to implement this technique is up to you. Personally, I find no issues with this method nor any complications, especially if the number of elements being faded in/out remains constant.

Here is an overview of the approach:

We have 3 elements/paragraphs; for demonstration purposes, let's assume they fade in over the first 3 seconds, remain static for the next 10 seconds, and then fade out at the end. Therefore, each element will require a total of 16 seconds for the animation process.
While one element completes its animation and another begins, the previous elements should maintain their final state (faded out). To achieve this, the following steps need to be taken:
- Set the animation-duration for all elements to the combined animation time of each element. In this case, it would be 3*16s = 48s.
- Define the keyframes so that each element remains idle for 32s of the total duration, allowing other elements to undergo their animations. This is accomplished by ensuring that the fade-in, stay, and fade-out occur within the initial 33% of the total animation duration.
- Assign an animation-delay of 16s to the second element (to start after the completion of the first) and 32s for the third element (after the first two complete).
Regarding the keyframes rule itself, as mentioned earlier, the entire animation for one element must finish within 33% of the full duration. At 6.25% (approximately 3s mark), we initiate the fade-in, maintain opacity: 1 until 26.75% (around 13s mark), and finally fade out completely at 33% (at the 16s mark).

#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 concept is quite straightforward, requiring some basic mathematical calculations as suggested in the comment by Paulie_D. The decision of whether or not to implement this technique is up to you. Personally, I find no issues with this method nor any complications, especially if the number of elements being faded in/out remains constant.

Here is an overview of the approach:

We have 3 elements/paragraphs; for demonstration purposes, let's assume they fade in over the first 3 seconds, remain static for the next 10 seconds, and then fade out at the end. Therefore, each element will require a total of 16 seconds for the animation process.
While one element completes its animation and another begins, the previous elements should maintain their final state (faded out). To achieve this, the following steps need to be taken:
- Set the animation-duration for all elements to the combined animation time of each element. In this case, it would be 3*16s = 48s.
- Define the keyframes so that each element remains idle for 32s of the total duration, allowing other elements to undergo their animations. This is accomplished by ensuring that the fade-in, stay, and fade-out occur within the initial 33% of the total animation duration.
- Assign an animation-delay of 16s to the second element (to start after the completion of the first) and 32s for the third element (after the first two complete).
Regarding the keyframes rule itself, as mentioned earlier, the entire animation for one element must finish within 33% of the full duration. At 6.25% (approximately 3s mark), we initiate the fade-in, maintain opacity: 1 until 26.75% (around 13s mark), and finally fade out completely at 33% (at the 16s mark).

#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 3

Answer №2

Here is the basic CSS code for this example:

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

When displaying the element (using the visible class), we want the visibility to change immediately but transition only the opacity property. When hiding the element (using the hidden class), we delay the visibility:hidden declaration for a fade-out effect. This is achieved by applying a transition on the visibility property with a duration of 0s and a delay.

After the fade-out transition, we aim to remove the hidden element from the layout to avoid leaving any gaps. Unfortunately, options are limited:

The display:none property applies instantly;
Using position:absolute has a similar issue;
We can resort to using margin-top as a workaround since it can be transitioned and delayed.

To utilize margin-top for hiding the element, a slightly more elaborate HTML structure is required:

<div class="visible">
  <div>…</div>
</div>

This results in a more complex CSS code:

.visible,
.hidden {
  overflow: hidden;
}
.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 {
  /* Add padding, borders, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

Answer 4

Here is the basic CSS code for this example:

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

When displaying the element (using the visible class), we want the visibility to change immediately but transition only the opacity property. When hiding the element (using the hidden class), we delay the visibility:hidden declaration for a fade-out effect. This is achieved by applying a transition on the visibility property with a duration of 0s and a delay.

After the fade-out transition, we aim to remove the hidden element from the layout to avoid leaving any gaps. Unfortunately, options are limited:

The display:none property applies instantly;
Using position:absolute has a similar issue;
We can resort to using margin-top as a workaround since it can be transitioned and delayed.

To utilize margin-top for hiding the element, a slightly more elaborate HTML structure is required:

<div class="visible">
  <div>…</div>
</div>

This results in a more complex CSS code:

.visible,
.hidden {
  overflow: hidden;
}
.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 {
  /* Add padding, borders, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

The never-ending delay of an infinite fade in and out CSS3 animation

Answer №1

Answer №2

Similar questions

Is it possible to trigger a script tag based on certain conditions using a JavaScript function?

Button click not functioning to switch the displayed image in Javascript

"Getting Started with Respond.js: A Step-by-Step

What is preventing me from choosing the complete table?

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

Map will be visible correctly only when the window is resized

Update the color of a span in JQuery when its value equals 0

jQuery live DataAttribute manipulation

What is the best method for converting a variable with HTML content into a printable string?

Updating class after refresh of ng-repeat in AngularJS/Javascript

The table borders in IE 11 do not display properly when using Html5 and CSS

Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

The method of stamping masonry is not encircling

Using a slider in Cordova application

Why isn't the main body of CSS extending across the entire page?

Carousel-Owl, glide through two items simultaneously

Change the background color of the top element box when scrolling

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Tips for deleting all content within a designated html tag (including the tag itself)

Dynamic styling with jQuery input focus animation