在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中連續的淡入淡出效果

回答

相關問題