Comment afficher correctement la première image du slider ?

Question

Comment faire en sorte qu'à l'ouverture de la page, la première image s'affiche immédiatement et que l'animation du curseur ne commence qu'ensuite ?

css

    .container_slider_css {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
          }

          .photo_slider_css {
            position: absolute;
            animation: round 24s infinite;
            opacity: 0;
            width: 100%;
          }

          @keyframes round {
           35% {
              opacity: 1;
            }
            50% {
              opacity: 0;
            }
          }
          img:nth-child(1) {
            animation-delay: 16s;
          }

          img:nth-child(2) {
            animation-delay: 8s;
          }

          img:nth-child(3) {
            animation-delay: 0s;
          }

html

    <div class="container_slider_css">
        <img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
        <img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
        <img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
      </div>

Answer 1

Je ne suis pas sûr de ce que vous vouliez dire exactement. Je suppose que vous voulez que le curseur commence à s'animer/glisser ? Vous devez utiliser une ligne de Javascript - window.onload et écrire une fonction qui permet à certains éléments css de se charger.

window.onload = function() {}