Question

我有一些文字，它是一个单词（countinue），我想创建该单词将为黑色，在31秒后它将为橙色。我尝试了很多与css的组合，但我不能创造那种效果。这是我的尝试：

这很棒，但我不知道如何阻止它..我只需要一次显示该文本。如果可能的不透明度为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/

动画不透明度文本css

2 个答案: