[英]How to get CSS pulsating effect to work in FireFox and Internet Explorer?
I'm using CSS to achieve a 'pulsating' or 'throbbing' effect. 我正在使用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;
}
}
See demo: http://jsfiddle.net/kJ6ZG/ 观看演示: http : //jsfiddle.net/kJ6ZG/
Source: https://stackoverflow.com/a/4911441/1709033 资料来源: https : //stackoverflow.com/a/4911441/1709033
It works fine in Chrome and Safari. 它可以在Chrome和Safari中正常运行。 However it doesn't seem to work in the following browsers:
但是,它似乎无法在以下浏览器中运行:
How can I modify the CSS so that the effect works in FF and IE? 如何修改CSS,以使效果在FF和IE中起作用?
You need to add the relevant browser/vendor prefixes , the -webkit-
part in your CSS specifically targets webkit browsers like chrome, by adding similar styles without this part it will work in FireFox (per below example), by changing the webkit
part to ms
it will work in Explorer. 您需要添加相关的浏览器/供应商前缀 ,即CSS中的
-webkit-
部分专门针对chrome等webkit浏览器,方法是添加类似的样式,但不添加此部分,它将在FireFox中工作(按下面的示例),方法是将webkit
部分更改为ms
它将在资源管理器中工作。
The standard prefixes are: -webkit-
for webkit browsers (Safari, Chrome) -ms-
for MSIE -moz-
for Firefox -o-
for Opera, removing the prefix will represent the base property which is often already accepted by some browsers regardless of their specific prefix. 标准前缀为:
-webkit-
用于webkit浏览器(Safari,Chrome))- -ms-
用于MSIE) -moz-
用于Firefox) -o-
用于Opera),删除前缀将表示一些浏览器通常已经接受的基本属性,无论它们的特定前缀。 If you arent sure, you can always look at caniuse.com 如果您不确定,可以随时访问caniuse.com
CSS 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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.