Question

我大约8个月前制作了它（第一个网站制作过），它有一个类似于这里所示的摆动动画：

以下链接中的动画适用于所有三种主流浏览器......所以我知道我的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;
}

Answer 1

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

.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);
   }
}

Answer 2

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

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

CSS text wiggle动画不再适用于Chrome / Firefox，但适用于Edge

2 个答案: