Блог

Главная - Вопросы по программированию - Почему CSS-анимация(webkit-анимация) не работает?

Почему CSS-анимация(webkit-анимация) не работает?

#html #css #animation

Вопрос:

Я написал код, как показано ниже

 /* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px;
  }
} 
 <div class="mySlides fade">
    <img class="banner-img" src="https://www.seoultech.ac.kr/storage/banner/rolling/SNUST1615422266317.png">
    <div class="text">Caption One</div>
</div>
<div class="mySlides fade">
    <img class="banner-img" src="https://www.seoultech.ac.kr/storage/banner/rolling/SNUST1552549610052.jpg">
    <div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
    <img class="banner-img" src="http://bnx.oa.gg/img/bnx_16fw_visual_03_list.jpg">
    <div class="text">Caption Three</div>
</div>

Но это не работает
, и я понял, что первая и вторая строки в теге .fade в CSS отображаются как строка отмены на моей веб-странице.

Как я могу это исправить? Спасибо.

Комментарии:

1. Кажется, все работает нормально. codepen.io/Paulie-D/pen/gOmRaYQ

2. Я уже знаю это. Но это не применяется на моей веб-странице.. 🙁 может ли быть проблемой структура моей веб-страницы?

3. Вы должны продемонстрировать проблему в вопросе . Если вы не можете этого сделать, мы не сможем вам помочь.

4. Я редко пользуюсь этим сайтом, поэтому не привык спрашивать. Но я решаю эту проблему. Я опускаю ключевое слово «отложить» в теге сценария в html. Спасибо вам за вашу помощь.

Метки: