анимационный текст непрозрачности css

Question

У меня есть текст, это одно слово (countinue), и я хочу создать это слово будет черным, а после 31 секунды он будет оранжевым. Я пробовал много комбинаций с css, но я не могу создать этот эффект. Вот моя попытка:

JSFIDDLE

Это здорово, но я не знаю, как остановить это .. мне нужно только один раз, чтобы показать, что текст. Было бы здорово, если бы можно непрозрачности быть 0 и после 31seconds непрозрачности будет 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/

для изменения background- цвет после 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/