Question

我的第一个问题请不要这么难。

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

所以我有这些盒子（还有一些），由div制作，可点击且很小，当有人按下“HELP”按钮时，我希望可点击的对象做一个动画来显示它们是可点击的。

为了达到这个目的，我在我拥有的更大的容器（#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)}
     }

Answer 1

将此syntax用于webkit

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

这就是说“-webkit-transform：”而不仅仅是'transform'

CSS3动画在firefox上工作但不在chrome中

1 个答案: