Can a CSS animation start based on when a JS animation ends?

Site URL: http://www.cherrytreeinteriordesign.com

I have a js code that animates the header on all but my mobile pages. The code is as follows:

<script>
if (document.documentElement.clientWidth <740) {
 window.location = "/mobile";
}
</script>

<script>
(function(){
    window.addEventListener('load', function() {
    var headerElements = document.querySelectorAll('header a')

    function fadeIn(element, time, delay) {
      var keyframes = {opacity: [0,1]};
      var timing = {
        duration: time,
        fill: 'both',
        easing: 'ease',
        delay: delay
      };
  
     element.animate(keyframes, timing)
    }

    function animateElements(element,animation,time,delay) {
        element.forEach((item,index) => {
            var delays = index*delay;
            item.style.display = 'inline-block';
            animation(item,time,delays)
        })
    };
    //Call animateElements function and set your timing and delay.
    animateElements(headerElements,fadeIn,2000,300);  
    })
})()
</script>

I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here:

.fade-in-text {
  display: inline-block;
  font-family: FuturaPT, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 6em;
  color: white;
  opacity: 0;
  animation: fadeIn linear 300ms;
  animation-delay: 5650ms;
  -webkit-animation: fadeIn linear 300ms;
  -webkit-animation-delay: 5650ms;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: fadeIn linear 300ms;
  -moz-animation-delay: 5650ms;
  -moz-animation-fill-mode: forwards;
  -o-animation: fadeIn linear 300ms;
  -o-animation-delay: 5650ms;
  -o-animation-fill-mode: forwards;
  -ms-animation: fadeIn linear 300ms;
  -ms-animation-delay: 5650ms;
  -ms-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;}
}

Anyone have any idea how to do this?

Thanks!

On 7/13/2021 at 12:20 AM, CherryTree said:

Site URL: http://www.cherrytreeinteriordesign.com

I have a js code that animates the header on all but my mobile pages. The code is as follows:

<script>
if (document.documentElement.clientWidth <740) {
 window.location = "/mobile";
}
</script>

<script>
(function(){
    window.addEventListener('load', function() {
    var headerElements = document.querySelectorAll('header a')

    function fadeIn(element, time, delay) {
      var keyframes = {opacity: [0,1]};
      var timing = {
        duration: time,
        fill: 'both',
        easing: 'ease',
        delay: delay
      };
  
     element.animate(keyframes, timing)
    }

    function animateElements(element,animation,time,delay) {
        element.forEach((item,index) => {
            var delays = index*delay;
            item.style.display = 'inline-block';
            animation(item,time,delays)
        })
    };
    //Call animateElements function and set your timing and delay.
    animateElements(headerElements,fadeIn,2000,300);  
    })
})()
</script>

I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here:

.fade-in-text {
  display: inline-block;
  font-family: FuturaPT, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 6em;
  color: white;
  opacity: 0;
  animation: fadeIn linear 300ms;
  animation-delay: 5650ms;
  -webkit-animation: fadeIn linear 300ms;
  -webkit-animation-delay: 5650ms;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: fadeIn linear 300ms;
  -moz-animation-delay: 5650ms;
  -moz-animation-fill-mode: forwards;
  -o-animation: fadeIn linear 300ms;
  -o-animation-delay: 5650ms;
  -o-animation-fill-mode: forwards;
  -ms-animation: fadeIn linear 300ms;
  -ms-animation-delay: 5650ms;
  -ms-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;}
}

Anyone have any idea how to do this?

Thanks!

You can add a custom class on body like .animation-start and enable css keyframe only when the class available