Extend animation duration — CSS3 - html

Question

I've got the following animation. What I'm trying to do is when the animation reaches 50% I want it to stay there for 8 seconds.
If I change animation-duration: 3s; to 8s its is painfully slow.
And the transition-duration: 0.5s; doesn't seem to have any effect whatsoever.
I also tried adding animation-duration: 5s; to 50% {} but that doesn't do anything either.
Any suggestions on how to accomplish this?
html body div#size_cont div#dirt_specs {
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
transform: scale(1.4,1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}

Answer 1

This is what you need to do in your animation frames:
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
And simply set your animation-duration to 11s.
Explanation:
Since your original animation was 3 seconds long, and your requirement is to include a 8 second delay in the middle, the entire animation becomes 11 seconds.
This means that 1.5s goes into the first transition, 8s goes into the frozen segment, and 1.5s goes into the ending transition.
With that said, you need to get the % at which 1.5s is done out of 11s, which 1.5/11 = 0.136, hence the 13.6%.
The 86.4% is calculated from the reverse, 1 - 1.5/11 = 0.864, and this is needed because you want to maintain this animation state up (i.e., the frozen segment) until the last 1.5s of the animation.
See below for a working example:
div {
height: 150px;
width: 150px;
background: red;
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
-o-animation-duration: 11s;
animation-duration: 11s;
transform: scale(1.4, 1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
<div></div>