CSS3 Animation only working in Chrome

問題描述

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.把雙引號都拿掉。