CSS3 Transition [Pause and Different Speeds] - html

Question

I wish to create a simple animation.
First Step: I wish to animate my div from 0% to 100% with 1s speed.
Second Step: I wish to create a pause of 2s.
Final Step: I wish to animate my div from left to right with 0.5s speed.
.effect {
-webkit-animation:.effect 1s ease both;
animation:effect 1s ease both;
background-color:#1c1f26;
display:block;
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:100%;
}
#-webkit-keyframes effect {
0% {
-webkit-animation-timing-function:ease-in;
width:0%;
}
100% {
-webkit-animation-timing-function:ease-out;
width:100%;
}
}
<div class="effect"></div>
For the first step it's done. ( You can see with my code to the top.)
But I can't create a pause and play with different speeds for the next steps.
Thanks for your help.

Answer 1

You can chain your animations.
.effect {
animation: animation-1 1s ease,animation-2 2s ease 1s,animation-3 0.5s ease 3s;
background-color:#1c1f26;
display:block;
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:0%;
}
#keyframes animation-1 {
from {width: 0%;}
to {width: 100%;}
}
#keyframes animation-2 {
from {width: 100%;}
to {width: 100%;}
}
#keyframes animation-3 {
from {width: 100%; left:0;}
to {width: 0%; left: 100%}
}
<div class="effect"></div>
This way, first it plays the animation-1, then the 2nd and then the 3rd.
I don't say it's the best way, but it does the job in this case.
You can also convert your timing 1s, 2s, 0.5s in percentage and do the keyframes according to this percentage. This way, you would have one animation only.

Answer 2

In short, you don't play it at different speeds. Instead, you just set things at appropriate percentages and do a little math to figure out where things should go.
You have three steps:
Step 1: 1s
Step 2: 2s
Step 3: .5s
You have 3.5s of total animation, so that should be your duration.
Step 1, percentage-wise, goes from 0% to (1s / 3.5s) * 100%, or about 28.6%.
Step 2, percentage-wise, takes 57.2%, so it goes from 28.6% to 85.7%.
Finally, Step 3 goes from 85.7% to 100%.
For the pause, you just have both its start and stop keep the same value. Nothing will move for that duration of time, so it's essentially paused.
.effect {
-webkit-animation: effect 3.5s ease both;
animation: effect 3.5s ease both;
background-color: #1c1f26;
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
#-webkit-keyframes effect {
0% {
-webkit-animation-timing-function:ease-in;
width: 0%;
}
28.6% {
width: 100%;
}
85.7% {
width: 100%;
margin-left: 0;
}
100% {
margin-left: 100%;
width: 0;
}
}
<div class="effect"></div>