html - 如何让 CSS 脉动效果在 FireFox 和 Internet Explorer 中工作？

Question

我正在使用 CSS 来实现“脉动”或“悸动”效果。

.throb {
    border: 3px solid #555;
    height: 50px;
    width: 50px;
    -webkit-border-radius: 50%;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
    z-index: 999;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1); opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2); opacity: 0.0;
    }
}

查看演示: http://jsfiddle.net/kJ6ZG/

来源:https://stackoverflow.com/a/4911441/1709033

它在 Chrome 和 Safari 中运行良好。但是它似乎不适用于以下浏览器:

• 火狐
• 互联网浏览器

如何修改 CSS 以使效果在 FF 和 IE 中有效？

Answer 1

需要添加相关的browser/vendor prefixes ，CSS 中的 -webkit- 部分专门针对像 chrome 这样的 webkit 浏览器，通过添加没有这部分的类似样式，它将在 FireFox 中工作(按照下面的示例)，通过更改 webkit 部分到 ms 它将在 Explorer 中工作。

标准前缀是:-webkit- 适用于 webkit 浏览器(Safari、Chrome)-ms- 用于 MSIE-moz- 用于 Firefox-o- 对于 Opera，删除前缀将表示一些浏览器通常已经接受的基本属性，而不管它们的特定前缀如何。如果您不确定，可以随时查看 caniuse.com

Demo Fiddle

CSS

.throb {
    border: 3px solid #555;
    height: 50px;
    width: 50px;
    -webkit-border-radius: 50%;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -ms-border-radius: 50%;
    -ms-animation: pulsate 2s ease-out;
    -ms-animation-iteration-count: infinite;
    -moz-border-radius: 50%;
    -moz-animation: pulsate 2s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-border-radius: 50%;
    -o-animation: pulsate 2s ease-out;
    -o-animation-iteration-count: infinite;
    border-radius: 50%;
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    z-index: 999;
}
@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-moz-keyframes pulsate {
    0% {
        -moz-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -moz-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-ms-keyframes pulsate {
    0% {
        -ms-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -ms-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-o-keyframes pulsate {
    0% {
        -o-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -o-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}