CODEWITHSUNDEEP
csscss-animations
Luiggi
Luiggi

Reputation: 368

animation when finish first animation

I'm trying to make two animation with CSS3.

How can I make the second animation, when the first is finished? I'll try with stylus too, but always have an error with the keyframes.

My codepen is: http://codepen.io/Luiggi/pen/IenGu

Thanks, Luiggi

Upvotes: 0

Views: 48

Answers (2)

Luiggi
Luiggi

Reputation: 368

thanks @aelor but I found my solution.

You must to create the 2 @keyframes and then, you must to write the css rule like this

.escenario {
    background-color: #f00;
    width: 0.09%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    -moz-transition: 2s all;
    -webkit-transition: 2s all;
    transition: 2s all;
    -o-animation: luiggi 2s, locura 2s 2s 1;
    -ms-animation: luiggi 2s, locura 2s 2s 1;
    -moz-animation: luiggi 2s, locura 2s 2s 1;
    -webkit-animation: luiggi 2s, locura 2s 2s 1;
    animation: luiggi 2s, locura 2s 2s 1
}

In animation , write the first animation, comma and the second one

Upvotes: 1

aelor
aelor

Reputation: 11116

here is what you need to do :

you must specify the attributes you want to change at different stages of your animation :

@keyframes luiggi {
    0% { height: 0%; width: 0.09%; left: 50%;}
    50% { height: 100%; width: 0.09%; left: 50%;}
    100% { height: 100%; width: 100%; left: 0%; }
}

updated pen here

Upvotes: 1

Related Questions