Borsn Borsn - 7 months ago 15
HTML Question

Extend animation duration — CSS3

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

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: 200px;
  width: 200px;
  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-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -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>