title: Create fade in/out animation on background images change css in react
body: <p>I create a list of images and every 5 seconds the image displayed as the background image is changed to the next.
  when changing from one image to another I want the image to be replaced to fade out in like 0.2s and the image be displayed to fade in 0.2s.</p>
  <p>here is what i did in my component :</p>
  <pre><code>export default function Login() {
    const Images = [ ...someImagesLinks ]
    const [position, setPosition] = useState(0);
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        if (position === 3) setPosition(0);
        else setPosition(position + 1);
      }, 5000);
      return () =&gt; clearInterval(interval);
    }, [position]);
  
    return (
      &lt;div className=&quot;loginPageContainer&quot;&gt;
        &lt;div
          style={{url(&quot;${Images[position].img}&quot;)`}}
          className=&quot;bg_images_login&quot;
        &gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>and here's my css :</p>
  <pre><code>.bg_images_login {
    width: 100vw;
    height: 100vh;
    margin: 0;
   }
  </code></pre>
  <p>the images change every 5 seconds but with no animation.
  how can I solve this issue with CSS?</p>