CSS 文本摆动动画不再适用于 Chrome/Firefox，但适用于 Edge

这是有问题的网站：http://dilanianart.me/

我大约在 8 个月前构建了它（有史以来第一个网站），它有一个类似于此处所示的摆动动画：

CSS 文本摆动

下面链接中的动画适用于所有三个主要浏览器...所以我知道我的 css 代码现在有问题（尽管我从以前开始没有改变任何东西）。

动画曾经有效，现在我重新登录了该网站，它不再在我的网页上工作。

您还可以通过浏览页面来查看所有源代码，因为它是一个静态网站。

.HTML：

<body>
   <div id="wrapper">
      <div id="header">
         <a href=index.html>DilanianArt.me</a>
      </div>
      <div id="nav">
         <li><a href=info.html class="wiggle-me">Info</a></li>
         <li><a href=flora.html class="wiggle-me">Flora</a></li>
         <li><a href=legends.html class="wiggle-me">Legends</a></li>
         <li><a href=portraits.html class="wiggle-me">Portraits</a></li>
      </div>
      <div id="content">
         <div class="flexslider">
            <ul class="slides">
               <li>
                  <img class="index" src="images/portraits/1.jpg" alt=" ">
               </li>
               <li>
                  <img class="index" src="images/legends/2.jpg" alt=" ">
               </li>
               <li>
                  <img class="index" src="images/flora/9.jpg" alt=" ">
               </li>
               <li>
                  <img class="index" src="images/portraits/4.jpg" alt=" ">
               </li>
               <li>
                  <img class="index" src="images/flora/2.jpg" alt=" ">
               </li>
            </ul>
         </div>
      </div>
      <div id="footer">
         <li>Copyrights 1-1985043901 Registered VAu001195524</li>
      </div>
   </div>
</body>

.CSS：

@-ms-keyframes wiggle {
   0% {
      -ms-transform:rotate(2deg);
   }
   50% {
      -ms-transform:rotate(-2deg);
   }
   100% {
      -ms-transform:rotate(2deg);
   }
}
@-moz-keyframes wiggle {
   0% {
      -moz-transform:rotate(2deg);
   }
   50% {
      -moz-transform:rotate(-2deg);
   }
   100% {
      -moz-transform:rotate(2deg);
   }
}
@-webkit-keyframes wiggle {
   0% {
      -webkit-transform:rotate(2deg);
   }
   50% {
      -webkit-transform:rotate(-2deg);
   }
   100% {
      -webkit-transform:rotate(2deg);
   }
}
@keyframes wiggle {
   0% {
      transform:rotate(2deg);
   }
   50% {
      transform:rotate(-2deg);
   }
   100% {
      transform:rotate(2deg);
   }
}

a.wiggle-me:hover {
   -ms-animation: wiggle .7s 30;
   -moz-animation: wiggle .7s 30;
   -webkit-animation: wiggle .7s 30;
   animation: wiggle .7s 30;
}

关键帧中缺少 webkit 的供应商前缀：

@-webkit-keyframes wiggle {
 0% {
   -webkit-transform: rotate(2deg);
 }
 50% {
   -webkit-transform: rotate(-2deg);
 }
  100% {
    -webkit-transform: rotate(2deg);
  }
}

我认为您需要在动画链中增加一些供应商前缀才能使其真正跨浏览器。

.wiggle-me {
   display: inline-block;
}
@-moz-keyframes wiggle {
   0% {
      -moz-transform: rotate(2deg);
   }
   50% {
      -moz-transform: rotate(-2deg);
   }
   100% {
      -moz-transform: rotate(2deg);
   }
}
@-webkit-keyframes wiggle {
   0% {
      -webkit-transform: rotate(2deg); 
     transform: rotate(2deg);
   }
   50% {
      -webkit-transform: rotate(-2deg); 
     transform: rotate(-2deg);
   }
   100% {
     -webkit-transform: rotate(2deg); 
     transform: rotate(2deg);
   }
}
@keyframes wiggle {
   0% {
     -moz-transform: rotate(2deg);
     -webkit-transform: rotate(2deg); 
     transform: rotate(2deg);
   }
   50% {
      -moz-transform: rotate(-2deg);
     -webkit-transform: rotate(-2deg); 
     transform: rotate(-2deg);
   }
   100% {
      -moz-transform: rotate(2deg);
     -webkit-transform: rotate(2deg); 
     transform: rotate(2deg);
   }
}

相关内容

最新更新

热门标签：