I'm trying to animate some img nested inside an a. I created a simple CSS3 animation with prefixes, in Chrome it's working, but not in other browsers, any idea what's wrong?
.pulso:hover {
-webkit-animation: pulso 2s ease infinite;
-moz-animation: pulso 2s ease infinite;
-ms-animation: pulso 2s ease infinite;
animation: pulso 2s ease infinite;
}
@keyframes "pulso" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes "pulso" {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes pulso {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes pulso {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
Remove all quotation.
把双引号都拿掉。