1
请不要这么难对我的第一个问题。在firefox上工作的CSS3动画,但不在铬上
我在这个主题上发现了许多答案,但是在这个主题之前,我只找到有关使用-webkit-我认为自己做得很好的解决方案,或者将非标记动画放在底部,我也这样做。
所以我有这个盒子(还有一些更好),由divs制成,可点击,很小,当有人按下按钮“帮助”时,我希望可点击的对象做一个动画来显示它们是可点击的。
为了达到这个目的,我在更大的容器(#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)}
}
所以这只是同样的老proble :),谢谢你,现在的工作,我supose我也应该这样做与-o-和-ms-,也许-moz-以及? – user1878697
是的,我也为别人考虑 –