動畫不透明文本css

Question

我有一些文本，它是一個單詞（countinue），我想創建該單詞將是黑色的，31秒後它將是橙色。我嘗試了很多與CSS的組合，但我無法創建該效果。這裏是我的嘗試：

JSFIDDLE

這是偉大的，但我不知道如何阻止它..我只需要一個時間來顯示文本。這將是巨大的，如果有可能的不透明度爲0，後31秒不透明度爲1。

div 
{ 
width:25px; 
height:25px; 
background:red; 
position:relative; 
animation:mymove 5s infinite; 
animation-delay:2s; 

/*Safari and Chrome*/ 
-webkit-animation:mymove 5s infinite; 
-webkit-animation-delay:2s; 
} 

@keyframes mymove 
{ 
from {left:0px;} 
to {left:200px;} 
} 

@-webkit-keyframes mymove /*Safari and Chrome*/ 
{ 
from {left:0px;} 
to {left:200px;} 
} 
    display: table-cell; 
} 

Answer 1

對於停止動畫，你可以使用

animation-iteration-count: 1; 

的jsfiddle http://jsfiddle.net/hD77v/1/

改變背景 - 31秒後顏色
HTML

<div id="test">continue</div> 

CSS

#test { 
background-color : red; 
} 

的Javascript

setTimeout(function(){ 
document.getElementById("test").style.backgroundColor="black"; 
},31000); 

Answer 2

你想這樣的：

from{left:0px;opacity:0;} 
to{left:200px;opacity:1;} 

演示：http://jsfiddle.net/C8d6H/