搜索

首页  >  问答  >  正文

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);
 }

}
怪我咯怪我咯2786 天前586

全部回复(1)我来回复

  • PHPz

    PHPz2017-04-17 11:12:04

    Remove all quotation.
    把双引号都拿掉。

    回复
    0
  • 取消回复