CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hero Stripe
Hero Stripe

Reputation: 89

animating opacity text css

I have some text, it is one word (countinue) and i want to create that word will be black and after 31second it will be orange. I tried a lot of combinations with css but i can't create that effect. Here is my try :

JSFIDDLE

This is great but i don't know how to stop it.. i need only one time to show that text. It would be great if it is possible to opacity be 0 and after 31seconds opacity will be 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;
}

Upvotes: 0

Views: 90

Answers (2)

Venkat Reddy
Venkat Reddy

Reputation: 1052

For stopping animation you can use

animation-iteration-count: 1;

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

for changing background-color after 31 seconds
HTML

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

CSS

#test {
background-color : red;
}

Javascript

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

Upvotes: 1

Max Meijer
Max Meijer

Reputation: 1729

Do you want this:

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

Demo: http://jsfiddle.net/C8d6H/

Upvotes: 0

Related Questions