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

这是有问题的网站：

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

下面链接中的动画在所有三种主要浏览器上运行。。。所以我知道我的css代码现在有点问题（尽管我之前没有做任何更改）

以前的动画很好用，现在我重新登录了这个网站，它不再在我的网页上工作了

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

HTML:

---

我认为你需要在动画链中增加一些厂商前缀，使其真正跨浏览器

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

---

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

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

---

那是我的错，我抄错代码了。但在我链接的网站上，它包含了正确的css格式，但不起作用。。。也没有从这个链接复制css代码：它实际上在chrome上工作。因此，我的网页中有某种东西阻止它在chrome和firefox中工作，有什么想法吗？再次查看您的代码。尝试设置内联块（.wiggle me{display:inline block；}）的链接。转换对内联元素不起作用（根据规范）。也在上面的代码中添加了它！您的网站对我不起作用，每次我试图通过开发工具检查它时，它都会崩溃，但我感觉动画不起作用，因为元素是内联的（

a

元素默认是内联的）.CSS转换不适用于我在这里提到的

内联
元素-请检查这是否解决了您的问题。
.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);
   }
}

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