CSS animation delay is not working on fadeIn effect. The animation begins immediately regardless of what i set the delay to

user_12942021 0
Viewed 53

Basically what the title says. I am trying to get this div to appear about 4s after page load, but it is instead appearing straight away. It is doing the fade animation (which lasts 2 seconds) but this animation is beginning straight away.

Here is the HTML:

.abouttext {
  text-align: center;
  /*color: white; removed for snippet demo*/
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  float: right;
}

#aboutone {
  margin-top: 10px;
  animation: fadeIn ease 2s;
  animation-delay: 5s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
  z-index: 0;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="abouttext" id="aboutone">
  <p>hello</p>
</div>

Any help at all on this would be great. I have googled it for hours but can't seem to work out why it is not working.

p.s I am using this on Chrome.

css html
2 Answers

As you're using prefixes for different browsers and they are after the original animation, browsers will use their prefixed animation (e.g. browsers using -webkit will expect -webkit-animation-delay).

You could add animation-duration with all separate prefixes or just use animation-delay in animation all together:

#aboutone {
  text-align: center;
  margin-top: 10px;
  z-index: 0;
  opacity: 0;
  
  /* animation: duration timing-function delay name */
  animation: 2s ease 5s fadeIn;
  -webkit-animation: 2s ease 5s fadeIn;
  -moz-animation: 2s ease 5s fadeIn;
  -o-animation: 2s ease 5s fadeIn;
  -ms-animation: 2s ease 5s fadeIn;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% {  opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
<div class="abouttext" id="aboutone">
  <p>hello</p>
</div>

If you want the animation to start (with delay) after the whole body is loaded and not right when user loads the page, you can use onload event listener on the body (As this answer to your question says)

user_108920740

You can use dom call back with a function in Javascript to wait until the document is loaded, then add the style to the element.

(function() {
    let target = document.querySelector('#aboutone');
    target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
  text-align: center;
  /*color: white; removed for snippet demo*/
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  float: right;
}

#aboutone {
  margin-top: 10px;
  animation: fadeIn ease 2s;
  z-index: 0;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="abouttext" id="aboutone">
  <p>hello</p>
</div>

As Vepthy suggested in comments... you could also add an event listener for the load. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

window.addEventListener('load', (event) => {
  let target = document.querySelector('#aboutone');
  target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
  text-align: center;
  /*color: white; removed for snippet demo*/
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  float: right;
}

#aboutone {
  margin-top: 10px;
  animation: fadeIn ease 2s;
  z-index: 0;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="abouttext" id="aboutone">
  <p>hello</p>
</div>

user_15335920
Related