CSS3 Animation only working in Chrome
怪我咯
怪我咯 2017-04-17 11:10:04
0
1
582

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

}
怪我咯
怪我咯

走同样的路,发现不同的人生

全員に返信(1)
PHPzhong

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート