search

Home  >  Q&A  >  body text

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 days ago584

reply all(1)I'll reply

  • PHPz

    PHPz2017-04-17 11:12:04

    Remove all quotation.
    Remove all double quotes.

    reply
    0
  • Cancelreply