CODEWITHSUNDEEP
htmlcssanimationdelay
user979974
user979974

Reputation: 953

CSS animation delay

I just have a problem in my CSS, I wanted that an animation starts ten seconds after the first animation, so I ues animation-delay property but it seems not working. Can you tell me what I am doing wrong ? Thanks.

#txteram {
    position:relative;
    top:-120px; /*-100px*/
    left: 40px;/*50px*//*200px;*/
    opacity: 0;

-webkit-transition: opacity 19s ease-in;
    -moz-transition: opacity 19s ease-in;
    -ms-transition: opacity 19s ease-in;
    -o-transition: opacity 19s ease-in;
    transition: opacity 19s ease-in;
    -webkit-transition: all 5s ease-in-out;/*19*/
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    /*animation delay*/
    animation-delay:15s;
    -webkit-animation-delay:15s;
}
.showtxteram #txteram {
    opacity: 1;
    transform: translate(150px,0);
    -webkit-transform: translate(150px,0);
    -o-transform: translate(150px,0); 
    -moz-transform: translate(150px,0);
}

Upvotes: 0

Views: 547

Answers (2)

qtgye
qtgye

Reputation: 3610

Try placing the delay in line with the transition:

-webkit-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-moz-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-ms-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
-o-transition: opacity 19s ease-in, all 5s ease-in-out 15s ;
transition: opacity 19s ease-in, all 5s ease-in-out 15s ;

Upvotes: 0

Sandro Paganotti
Sandro Paganotti

Reputation: 2313

Due the fact that you're using transition the property you need is transition-delay, I've created a working version of your demo, here's the fiddle: http://jsfiddle.net/sandro_paganotti/dhk8U/1/

-webkit-transition: opacity 1s ease-in, -webkit-transform 1s ease-in 3s;
-moz-transition: opacity 1s ease-in, -moz-transform 1s ease-in 3s;
-ms-transition: opacity 1s ease-in, -ms-transform 1s ease-in 3s;
transition: opacity 1s ease-in, transform 1s ease-in 3s;

Upvotes: 1

Related Questions