CSS3 动画在 Firefox 上工作，但在 Chrome 上不工作

Posted 2023-03-06

【中文标题】CSS3 动画在 Firefox 上工作，但在 Chrome 上不工作

【英文标题】：CSS3 animation working on Firefox but not in Chrome

【发布时间】：2012-11-23 04:48:08

【问题描述】：

我之前在这个网站上找到了很多答案，但是在这个主题上，我只找到了关于使用 -webkit- 的解决方案，我认为我做得很好，或者将非标签动画放在底部，我也这样做。

我有这些框（还有一些），由 div 制成，可点击且很小，当有人按下“帮助”按钮时，我希望可点击的对象制作动画以显示它们是可点击的。

为了实现这一点，我在我拥有的更大容器（#body 翻译）上设置了一个类（.ayuda），这与 css 的“.ayuda .help”匹配并在 Firefox 上触发动画，但在 Chrome 上却没有不适用于任何动画（它什么都不做）

html

<div id="cuerpo">
    <div id="pegatina">
        <div id="north_vul" class="NS_vul help" onclick="changevul('NS')"></div>
        <div id="west_vul" class="EW_vul help" onclick="changevul('EW')"></div>
        <div id="east_vul" class="EW_vul help" onclick="changevul('EW')"></div>
        <div id="south_vul" class="NS_vul help" onclick="changevul('NS')"></div>
        <div class="estuchenum help2" onclick="eticlick()"><p></p></div>
    </div>
<section id="botones_crear">
        <p class="blue button" onclick=" $('#cuerpo').addClass('ayuda'); setTimeout(function() $('#cuerpo').removeClass('ayuda');,2000);">HELP</p>        
    </section>
</div>

CSS

.NS_vul
cursor: pointer;
height: 15%;
border: 1px solid rgb(78, 78, 78);

.EW_vul
cursor: pointer;
width: 18%;
border: 1px solid rgb(78, 78, 78);
top: 22%;
bottom: 23%;


#north_vul
position: absolute;
top: 2%;
left: 2%;
right: 2%;

#south_vul
position: absolute;
bottom: 2%;
left: 2%;
right: 2%;

#west_vul
position: absolute;
left: 2%;

#east_vul
position: absolute;
right: 2%;

   .ayuda .help
              z-index:200;
             -webkit-animation: ayuda 1s linear;
             -moz-animation: ayuda 1s linear;
             -ms-animation: ayuda 1s linear;
             -o-animation: ayuda 1s linear;
             animation: ayuda 1s linear;         
     
     
     .ayuda .help2
              z-index:210;
             -webkit-animation: ayuda2 2s linear;
             -moz-animation: ayuda2 2s linear;
             -ms-animation: ayuda2 2s linear;
             -o-animation: ayuda2 2s linear;
             animation: ayuda2 2s linear;         
     
     
     
     @-webkit-keyframes ayuda 
             0%  transform: scale(1.0);
             25%  transform: scale(1.5) rotate(-30deg)
             50%  transform: scale(1.5);
             75%    transform: scale(1.5) rotate(+30deg)
             100%  transform: scale(1.0);
     
     @-moz-keyframes ayuda 
             0%  transform: scale(1.0);
             25%  transform: scale(1.5) rotate(-30deg)
             50%  transform: scale(1.5);
             75%    transform: scale(1.5) rotate(+30deg)
             100%  transform: scale(1.0);
     
     @-ms-keyframes ayuda 
             0%  transform: scale(1.0);
             25%  transform: scale(1.5) rotate(-30deg)
             50%  transform: scale(1.5);
             75%    transform: scale(1.5) rotate(+30deg)
             100%  transform: scale(1.0);
     
     @-o-keyframes ayuda 
             0%  transform: scale(1.0);
             25%  transform: scale(1.5) rotate(-30deg)
             50%  transform: scale(1.5);
             75%    transform: scale(1.5) rotate(+30deg)
             100%  transform: scale(1.0);
     
     @keyframes ayuda 
             0%  transform: scale(1.0);
             25%  transform: scale(1.5) rotate(-30deg)
             50%  transform: scale(1.5);
             75%    transform: scale(1.5) rotate(+30deg)
             100%  transform: scale(1.0);
     

     @-webkit-keyframes ayuda2 
             0%  transform: scale(1.0);
             10%  transform: scale(1.5) 
             30%  transform: scale(1.5) rotate(-90deg)
             50%  transform: scale(1.5) rotate(-180deg)
             70%  transform: scale(1.5) rotate(-270deg)
             90%  transform: scale(1.5) rotate(-360deg)
             100%  transform: scale(1.0) rotate(-360deg)
     
     @-moz-keyframes ayuda2 
             0%  transform: scale(1.0);
             10%  transform: scale(1.5) 
             30%  transform: scale(1.5) rotate(-90deg)
             50%  transform: scale(1.5) rotate(-180deg)
             70%  transform: scale(1.5) rotate(-270deg)
             90%  transform: scale(1.5) rotate(-360deg)
             100%  transform: scale(1.0) rotate(-360deg)
     
     @-ms-keyframes ayuda2 
             0%  transform: scale(1.0);
             10%  transform: scale(1.5) 
             30%  transform: scale(1.5) rotate(-90deg)
             50%  transform: scale(1.5) rotate(-180deg)
             70%  transform: scale(1.5) rotate(-270deg)
             90%  transform: scale(1.5) rotate(-360deg)
             100%  transform: scale(1.0) rotate(-360deg)
     
     @-o-keyframes ayuda2 
             0%  transform: scale(1.0);
             10%  transform: scale(1.5) 
             30%  transform: scale(1.5) rotate(-90deg)
             50%  transform: scale(1.5) rotate(-180deg)
             70%  transform: scale(1.5) rotate(-270deg)
             90%  transform: scale(1.5) rotate(-360deg)
             100%  transform: scale(1.0) rotate(-360deg)
     
     @keyframes ayuda2 
             0%  transform: scale(1.0);
             10%  transform: scale(1.5) 
             30%  transform: scale(1.5) rotate(-90deg)
             50%  transform: scale(1.5) rotate(-180deg)
             70%  transform: scale(1.5) rotate(-270deg)
             90%  transform: scale(1.5) rotate(-360deg)
             100%  transform: scale(1.0) rotate(-360deg)
     

【参考方案1】：

将此syntax 用于 webkit

@-webkit-keyframes pulse 
 0% 
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
  ...

就是说“-webkit-transform:”而不是“转换”

【讨论】：

所以这只是同一个老问题 :)，谢谢，现在可以了，我想我应该对 -o- 和 -ms- 和也许 -moz- 做同样的事情？跨度>