css持续淡入淡出,在CSS中连续的淡入淡出效果

代码：

CSS：

body { background: #fff; }

@-webkit-keyframes 'blink' {

0% {

opacity:1;

}

50% {

opacity:0;

}

100% {

opacity:1;

}

}

.objblink {

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

-webkit-animation-direction: normal;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-name: blink;

-webkit-animation-timing-function: ease-in-out;

}

HTML：

TEST

但这种代码只在谷歌浏览器的工作。我希望它也可以在其他主流浏览器中使用。

+2

'-webkit-keyframes'的 - 这只会在使用WebKit引擎的浏览器。 –

+0

@NickR我试过了-moz和-o，但没有工作:( –

+0

也有你定义的webkit-animation，它告诉它在webkit浏览器中运行动画(命名为blink)，但你没有任何东西其他(FF/IE等) - 看看http://css-tricks.com/snippets/css/keyframe-animation-syntax/ –