CODEWITHSUNDEEP
cssanimationcss-transitions
Kinjan Koradiya
Kinjan Koradiya

Reputation: 490

CSS3 text animation issue

I need to text animation without js, mean css3 effects. I want text fadein and slide right to left some pixel. I tried below code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
#container header h1{
    float:left;
    padding:0 5px; margin:0;
-webkit-animation-name: slider; 
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}

#container header h1.word2{animation-delay:0.5s; -webkit-animation-delay:0.5s;}
#container header h1.word3{animation-delay:1.0s; -webkit-animation-delay:1.0s;}
#container header h1.word4{animation-delay:1.5s; -webkit-animation-delay:1.5s;}
#container header h1.word5{animation-delay:2.0s; -webkit-animation-delay:2.0s;}
#container header h1.word6{animation-delay:2.5s; -webkit-animation-delay:2.5s;}
#container header h1.word7{animation-delay:3.0s; -webkit-animation-delay:3.0s;}
#container header h1.word8{animation-delay:3.5s; -webkit-animation-delay:3.5s;}
#container header h1.word9{animation-delay:4.0s; -webkit-animation-delay:4.0s;}
#container header h1.word10{animation-delay:4.5s; -webkit-animation-delay:4.5s;}

@-webkit-keyframes slider {
       from {-webkit-transform: translateX(175px); opacity: 0;}
       to{-webkit-transform: translateX(0px); opacity: 1;}        
}

</style>
</head>

<body>

<div id="container">
            <header>            
                <h1 class="word1">One</h1>
                <h1 class="word2">Two</h1>
                <h1 class="word3">Three</h1>
                <h1 class="word4">Four</h1>
                <h1 class="word5">Five</h1>
                <h1 class="word6">Six</h1>
                <h1 class="word7">Seven</h1>
                <h1 class="word8">Eight</h1>
                <h1 class="word9">Nine</h1>
                <h1 class="word10">Ten</h1>
            </header>
          </div>

</body>
</html>

But the problem I facing is text word take opacity:0 after end of animation.. I need to remove opacity after finished of animation.

Is it possible ??

Upvotes: 0

Views: 687

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use animation-fill-mode like this:

#container header h1{
    float:left;
    padding:0 5px; margin:0;
    -webkit-animation-name: slider; 
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    opacity: 0;  
}

this will stop the animation after opacity is 1.

Upvotes: 2

Related Questions