时间戳

首页 > 解决方案 > 为什么 CSS 动画（webkit-animation）不起作用？

html - 为什么 CSS 动画（webkit-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>

但它不起作用，我意识到 CSS 中 .fade 标记中的第一行和第二行在我的网页上显示为取消行。

我该如何解决？谢谢你。

标签： htmlcssanimation

解决方案

推荐阅读