Make a Pause During Infinite CSS3 Animation

Make a pause during infinite CSS3 animation

It seems like the only way to achieve this is to extend the animation so that it lasts 4s instead of 1s. Then you could delay the animation by animating from 75% to 100% (rather than 0% to 100%).

In doing so, there is essentially an artificial delay in the animation itself. You just have to do the math to figure out how long this delay is in correlation with the total length of the animation itself.

Updated Example

.face.back {
      display: block;
      transform: rotateY(180deg);
}

.face.back {
    -webkit-animation: BackRotate 4s linear infinite;
    animation: BackRotate 4s linear infinite;
}

.face.front {
    -webkit-animation: Rotate 4s linear infinite;
    animation: Rotate 4s linear infinite;
}

@-webkit-keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
} 
@keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
}

Pause in infinitive CSS animation

Easiest way is to make the duration of the animation longer (4s below) and use half of the animation time with the keyframes. The rest of the keyframes the object will be at rest.

.btn-bottom {  width: 48px;  height: 58px;  background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") center center no-repeat;  background-size: 47px;  margin: auto;  top: 40px;  left: 0;  right: 0;  cursor: pointer;  animation: bounce 4s infinite;}
@keyframes bounce {  10%,  20%,  30%,  40%,  50% {    transform: translateY(0);  }  15% {    transform: translateY(-30px);  }  25% {    transform: translateY(-15px);  }  35% {    transform: translateY(-5px);  }  45% {    transform: translateY(-2px);  }}

<div class="btn-bottom"></div>

Is there a way to pause a specific CSS3 animation

Consider animation-play-state by simply writing:

.input:hover > .blaster {
  animation-play-state:running,paused;
}

Full code

body {  background: #121212;  overflow: hidden;}
.input {  transition: 100ms ease;  position: relative;  width: 100px;  height: 100px;  background: transparent;  border: 1.2px solid #383838;  border-radius: 10px;  margin: 0 auto;  top: 200px;  text-align: center;}.input .blaster {  position: absolute;  transition: 100ms ease;  background: #fff;  width: 100px;  height: 10px;  margin: 30% auto;  filter: blur(3px);  border-radius: 50%;  animation: anim 2s ease infinite,pass 500ms linear infinite;  top: -150px;}.input > span {  transition: 100ms ease;  position: relative;  top: 40px;  color: #aaa;}.input:hover {  animation: move 100ms ease infinite;  border-color: #eee;  background-color: #272727;}.input:hover > .blaster {  animation-play-state:running,paused;}.input:hover > span {  color: transparent;}
@keyframes anim {  from {    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;  }  50% {    box-shadow: 0 0 5px 2px #fff,0px 0px 16px 3px #f33,0 0 15px 5px #f33;  }  to {    box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;  }}@keyframes pass {  from {    transform: translateX(-600px);  }  to {    transform: translateX(600px);  }}@keyframes move {  from {    transform: translateX(0px);  }  25% {    transform: translateX(2.24px);  }  75% {    transform: translateX(-1.75px);  }  to {    transform: translateX(0px);  }}

<div class="input">  <span>Hover me</span>  <div class="blaster"></div></div>

Pause an infinite CSS3 animation on hover and use transform

Instead of setting animation-play-state, just remove the animation during the hover:

.shake:hover {
    -webkit-animation: none;
    animation: none;    
}

Setting the same property via an animation and a normal rule seems to conflict.

http://jsfiddle.net/3R92G/2/

CSS animation: pausing

Use animation-play-state as below:

h1 {
    animation-name: test;
    animation-duration:3000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state:running;/*running normally*/
}

h1:hover {
    animation-play-state:paused; /*paused when hover*/
}

DEMO

Note - The animation-play-state property is not supported in Internet Explorer 9 and earlier versions.

Adding 10 second pause to CSS animation

Edited:

.whoiam { 
    animation-duration: 40s; /* 4 x 10s */
    animation-delay: 10s;
}

h2 { animation-duration: 10s; }

@keyframes fade {
    0% {opacity: 0;} 
    10% {opacity: 1;} 
    100% {opacity:1;}
}

This is the full code (the pen) :

#container{    overflow:hidden;    height:48px;}.whoiam{    -webkit-animation: move;            animation: move;    position:relative;    -webkit-animation-duration: 40s;            animation-duration: 40s;    -webkit-animation-iteration-count: infinite;            animation-iteration-count: infinite;    -webkit-animation-timing-function: step-start;            animation-timing-function: step-start;    -webkit-animation-delay: 10s;            animation-delay: 10s;}h2{ height:48px;margin:0;padding:0}@-webkit-keyframes move {    0% { margin-top: 0em; }    25% { margin-top: -48px; }    50% {margin-top: -96px;}    75% {margin-top: -144px; }    100% {margin-top: 0;}}@keyframes move {    0% { margin-top: 0em; }    25% { margin-top: -48px; }    50% {margin-top: -96px;}    75% {margin-top: -144px; }    100% {margin-top: 0;}}
h2{    -webkit-animation: fade;            animation: fade;    -webkit-animation-duration: 10s;            animation-duration: 10s;    -webkit-animation-iteration-count: infinite;            animation-iteration-count: infinite;}
@-webkit-keyframes fade {    0% { opacity: 0; filter:alpha(opacity=0); }    10% { opacity: 1; filter:alpha(opacity=100); }    100% { opacity: 1; filter:alpha(opacity=100); }}
@keyframes fade {    0% { opacity: 0; filter:alpha(opacity=0); }    10% { opacity: 1; filter:alpha(opacity=110); }    100% { opacity: 1; filter:alpha(opacity=100); }}

<h1>Here's some stuff</h1><div id="container"><div class='whoiam'>  <h2>Florb</h2>  <h2>Dongus</h2>  <h2>Bizzlebrop</h2>  <h2>Yoindle</h2></div></div>

How to take a break during a CSS animation to pause at the center point of the transition?

Instead of using from and to in your keyframes, you can set steps using percentages.

In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:

@keyframes defilement {
    0% {left: 0;}
    45% {left: 500px;}
    55% {left: 500px;}
    100% {left: 1000px;}
}

Responsive solution: blocks will stop in the centre an any size screen.

If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.

However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!

Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.

@keyframes defilement {
    0%   { left: -250px;}
    45%  { left: calc(50% - 125px); }
    55%  { left: calc(50% - 125px); }
    100% { left: 100%;}
}

Working example:

.bandeau {
  height: 120px;
  width: 100%;
  padding-top: 5px;
  border-radius: 25px;
  background: rgb(26, 133, 230);
}

@keyframes defilement {
    0%   { left: -250px; }
    45%  { left: calc(50% - 125px); }
    55%  { left: calc(50% - 125px); }
    100% { left: 100%; }
}

.defil {
  margin: 10px;
  position: relative;
  height: 20px;
  background-color: black;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}

.defil div {
  position: absolute;
  top: 0;

  width: 250px;
  height: 20px;
  background-color: blue;
  opacity: 1;
}

.ex1 div {
  animation: defilement 20s linear infinite;
}

.ex2 div {
  top: 0;
  right: 0;
  background-color: white;
  animation: defilement 20s linear infinite reverse;
}

.ex3 div {
  background-color: red;
  animation: defilement 20s linear infinite;
}

<div class="bandeau">

  <div class="defil ex1">
    <div>MANAGEMENT</div>
  </div>

  <div class="defil ex2">
    <div>OF MY</div>
  </div>

  <div class="defil ex3">
    <div>VIDEO LIBRARY</div>
  </div>

</div>

---

Related Topics