javascript - 动画不透明文本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);