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