为什么值兼容谷歌 急

Question

.map g:hover{

-webkit-animation: bb 2s alternate infinite;

-moz-animation: bb 2s alternate infinite;

-ms-animation: bb 2s alternate infinite;

-o-animation: bb 2s alternate infinite;

    animation: bb 2s alternate infinite;

}

@-webkit-keyframes bb{

    25%{

        fill: rgba(0, 153, 255, 0.8);

        -webkit-transform-origin: 50% 50%;

        -webkit-transform:scale(1.2);

    }

    50%{

    -webkit-transform-origin: 50% 50%;

    }

    75%{

    -webkit-transform-origin: 50% 50%;

    -webkit-transform:scale(1.5);

    100%{

    -webkit-transform-origin: 50% 50%;

    }

}

@-moz-keyframes bb{

    25%{

        fill: rgba(0, 153, 255, 0.8);

        -moz-transform-origin: 50% 50%;

        -moz-transform:scale(1.2);

    }

    50%{

        -moz-transform-origin: 50% 50%;

    }

    75%{

        -moz-transform-origin: 50% 50%;

        -moz-transform:scale(1.5);

    }

    100%{

        -moz-transform-origin: 50% 50%;

    }

}

@-ms-keyframes bb{

    25%{

        fill: rgba(0, 153, 255, 0.8);

        -ms-transform-origin: 50% 50%;

        -ms-transform: scale(1.2);

    }

    50%{

        -ms-transform-origin: 50% 50%;

    }

    75%{

        -ms-transform-origin: 50% 50%;

        -ms-transform: scale(1.5);

    }

    100%{

        -ms-transform-origin: 50% 50%;

    }

}

@-o-keyframes bb{

    25%{

        fill: rgba(0, 153, 255, 0.8);

        -o-transform-origin:50% 50%;

        -o-transform:scale(1.2);

    }

    50%{

        -o-transform-origin:50% 50%;

    }

    75%{

        -o-transform-origin:50% 50%;

        -o-transform:scale(1.5);

    }

    100%{

        -o-transform-origin:50% 50%;

    }

}

@keyframes bb{

    25%{

        fill: rgba(0, 153, 255, 0.8);

        transform-origin:50% 50%;

        transform:scale(1.2);

    }

    50%{

        transform-origin:50% 50%;

    }

    75%{

        transform-origin:50% 50%;

        transform:scale(1.5);

    }

    100%{

        transform-origin:50% 50%;

    }

}

Answer 1

为什么只兼容谷歌？因为这个css用了大量的-webkit-，-webkit-头并不是css标准属性，是webkit内核自有的。-moz-头也是如此，是火狐自有的。