div with fixed position and css attribute "animation", it doesn't animate with the &q-CodePudding

I am trying to create an animation to a div with fixed position. basically I want that when 5 seconds pass a class is added to this div and an animation is made, but for some reason, it is not happening.

What am I doing wrong?

import { useRef, useEffect } from "react";
export default function Modal() {
  const modal = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      modal.current.classList.add("modalShow");
    }, 5000);
  }, []);

  return <div id="modal" ref={modal} className="modalContainer "></div>;
}


.modalContainer {
  position: fixed;
  height: 100%;
  width: 100%;
  background: red;
  animation: all 5s ease-out;
  transform: translateY(100%);
}

.modalShow {
  transform: translateY(0%);
}
.modalHide {
  transform: translateY(100%);
}

this is my live code:

Live Code

thanks!

CodePudding user response：

You are not using @keyframes.

Change:

animation: all 5s ease-out;

to:

transition: all 5s ease-out;