Почему изображения не меняются с помощью CSS img: nth-of-type - PullRequest
Новая
       6

Почему изображения не меняются с помощью CSS img: nth-of-type

0 голосов
/ 11 февраля 2019

Я пытаюсь добавить анимацию к 4 изображениям, используя CSS.По сути, анимация - это переход, при котором каждое изображение отображается в течение определенного периода времени, а затем изменяется на следующее изображение.Проблема, однако, в том, что он не переходит на другое изображение, он остается только на первом изображении.

Ниже приведен мой код файла index.html 

<html>
      <head>
         <title>My Test Animation</title>
         <script src = 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
   </script>
      <script src = "Scripts/aquaticcenter.js"></script>
      <link rel="stylesheet" href="CSS/transitions.css">
   </head>

   <body>
      <h2>My Test Animation</h2>

      <div id="cf3">          
       <img  id="cf3" src="/images/test1.jpg" />
       <img  id="cf3" src="/images/test2.jpg" />
       <img  id="cf3" src="/images/test3.jpg" />
      </div>

   </body>


</html>

Ниже приведен мой код CSSв отдельном файле (transitions.css) 

#cf3 {
   position:relative;
   height:281px;
   width:450px;
   margin:0 auto;
     }

#cf3 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    }




@keyframes cf3FadeInOut {
  0% {
     opacity:1;
     }
  17% {
     opacity:1;
     }
  25% {
    opacity:0;
    }
  92% {
    opacity:0;
   }
  100% {
    opacity:1;
   }
}

#cf3 img:nth-of-type(1) {
   animation-delay: 6s;
}
#cf3 img:nth-of-type(2) {
   animation-delay: 4s;
}
#cf3 img:nth-of-type(3) {
   animation-delay: 5s;
}
#cf3 img:nth-of-type(4) {
  animation-delay: 5s;
}
...