在CSS中连续的淡入淡出效果

我想要一个不应该停止（应该连续）的CSS淡入淡出效果。我创建一个：http://jsfiddle.net/z5UB5/在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：

<p class="objblink">TEST</p>

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

来源

2014-07-08 user3816402

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

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

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

你可以在这里看到jsfiddle我修改，我让你的动画定义更短：

-moz-animation: blink 2s ease-in-out infinite normal; 
-webkit-animation: blink 2s ease-in-out infinite normal; 
animation: blink 2s ease-in-out infinite normal;

从眨眼添加-moz和@keyframes语法和删除单引号。你可以看到动画at Mozilla Dev Network

来源

2014-07-08 13:02:40 AlexDom

感谢加入-o和-ms将使它在Opera＆IE中也能工作？ – user3816402

是的，我认为这个网站可以帮助你http://css3please.com/ – AlexDom

的简写语法如果你打开一个jQuery的解决方案，这应该为你做的伎俩：

$(document).ready(function(){ 
    shown = true; 
    setInterval(function(){ 
     if(shown == true) 
      $(".objblink").fadeOut(); 
     else 
      $(".objblink").fadeIn(); 

     shown = !shown; 
    },500); 
});

Here是的jsfiddle

来源

2014-07-08 13:08:26 clami219

是的，我知道它可以通过jQuery完成，但它不会在每个浏览器支持。对？ + CSS的加载速度会更快：（ – user3816402

嗯，这取决于你需要支持哪些浏览器，Chrome，Firefox和IE 9+都支持它，要在IE8上支持，只需稍加修改即可。即使它不到一秒钟），但实际的处理工作非常相似...... – clami219

当你的最新提琴，你已经用单引号声明动画名称。删除那一个，它会工作。

而是这个

@-moz-keyframes 'blink' { 
0% { 
    opacity:1; 
} 
50% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
}

使用此

@-moz-keyframes blink { 
0% { 
    opacity:1; 
} 
50% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
}

DEMO

来源

2014-07-08 13:10:31

感谢加入-o和-ms将使它在Opera＆IE中也能工作？ – user3816402

是的。它会解决这个问题。 –

CSS: 
.objblink{ 
    -webkit-animation: myfirst 3s; 
    animation:myfirst 3s; 
} 
@keyframes myfirst { 
    0% { 
     opacity:1; 
    } 
    50% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
} 
HTML: 
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>

来源

2014-07-08 13:30:05

在CSS中连续的淡入淡出效果

回答

相关问题