Html Question posted in
Some basic documentation can be found here.

Html – CSS animation starts delayed

I have multiple background images, which should change by animation. Here is a MWE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  width: 100%;
  position: relative;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  animation: fade 16s ease-in-out infinite alternate;
}

img:nth-of-type(1) {
  animation-delay: 0s;
}

img:nth-of-type(2) {
  animation-delay: 4s;
}

img:nth-of-type(3) {
  animation-delay: 8s;
}

img:nth-of-type(4) {
  animation-delay: 12s;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="container">
  <div class="overlay"></div>
  <img alt="01" src="https://i.imgur.com/CzXTtJV.jpg">
  <img alt="03" src="https://i.imgur.com/OB0y6MR.jpg">
  <img alt="04" src="https://i.imgur.com/OnwEDW3.jpg">
  <img alt="05" src="https://farm4.staticflickr.com/3075/3168662394_7d7103de7d_z_d.jpg">
</div>

It works fine, but somehow the image fading starts delayed, in this case only after 16s the first image is fading out and the second image is fading in. After this initial delay, the timing seems to be correct.

How can I fix this?

Tags:

2

Answers


  1. 0

    Explanation

    1. Animation Delays : By setting negative delays, the animations start partway through their cycle, which means the fading effect begins almost immediately when the page loads. The delays are adjusted so that each subsequent image starts its animation slightly later than the previous one, creating a continuous fading effect.

    2. Animation Duration : The total duration of the animation is reduced to 8 seconds. This means each image will cycle through its fade in and fade out in 8 seconds instead of 16 seconds.

    3. Keyframes : Simplified to make the image fully visible at both the start and end of the animation, with a fade to zero opacity in the middle.

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        height: 100vh;
        width: 100%;
        position: relative;
    }

    .overlay {
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        animation: fade 8s ease-in-out infinite;
    }

    /* Need to update */

    img:nth-of-type(1){
        animation-delay: -6s;
    }
    img:nth-of-type(2){
        animation-delay: -4s;
    }
    img:nth-of-type(3){
        animation-delay: -2s;
    }
    img:nth-of-type(4){
        animation-delay: 0s;
    }
    
    /* Better Practice */

    @keyframes fade {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }

    <div class="container">
    <div class="overlay"></div>
    <img alt="01" src="https://i.imgur.com/CzXTtJV.jpg">
    <img alt="03" src="https://i.imgur.com/OB0y6MR.jpg">
    <img alt="04" src="https://i.imgur.com/OnwEDW3.jpg">
    <img alt="05" src="https://farm4.staticflickr.com/3075/3168662394_7d7103de7d_z_d.jpg">
</div>
    Login or Signup to reply.
  2. 0

    animation running without delay

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  width: 100%;
  position: relative;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  animation: fade 16s ease-in-out infinite alternate;
}

img:nth-of-type(1) {
  animation-delay: -16s;
}

img:nth-of-type(2) {
  animation-delay: -12s;
}

img:nth-of-type(3) {
  animation-delay: -8s;
}

img:nth-of-type(4) {
  animation-delay: -4s;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    <div class="container">
  <div class="overlay"></div>
  <img alt="01" src="https://i.imgur.com/CzXTtJV.jpg">
  <img alt="03" src="https://i.imgur.com/OB0y6MR.jpg">
  <img alt="04" src="https://i.imgur.com/OnwEDW3.jpg">
  <img alt="05" src="https://farm4.staticflickr.com/3075/3168662394_7d7103de7d_z_d.jpg">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search