CSS文本摆动动画不再在Chrome / Firefox上运行，但在Edge上运行

Question

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

我在大约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文本摆动动画不再在Chrome / Firefox上运行，但在Edge上运行

问题描述

2 个解决方案

解决方案1
0 2016-02-06 21:52:02

解决方案2
0 2016-02-06 21:54:20

CSS文本摆动动画不再在Chrome / Firefox上运行，但在Edge上运行

问题描述

2 个解决方案

解决方案1 0 2016-02-06 21:52:02

解决方案2 0 2016-02-06 21:54:20

解决方案1
0 2016-02-06 21:52:02

解决方案2
0 2016-02-06 21:54:20