How Make a Looped Animation Wait Using CSS3

how make a looped animation wait using css3

Add 0.5 seconds to your animation duration, then create an extra frame in your keyframes that doesn't change the rotation amount;

@-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(0deg);
    }
    83% { /*2.4 / 2.9 = 0.827*/
    -webkit-transform: rotate(360deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
.animated {
...
-webkit-animation-duration: 2.9s; /*note the increase*/
...
}

Little demo: little link.

CSS animation delay in between loop

Make your loop longer and add more keyframes.

@-webkit-keyframes slidingPrice {
  0%     { opacity: 0; bottom: -30px; } /* 0ms initial values */
  2.38%  { opacity: 1; bottom: 0; }     /* 150ms half of animation */
  34.13% { opacity: 1; bottom: 0; }     /* 2150ms still at half of animation */
  36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
  100%   { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}

.price {
    -webkit-animation-name: slidingPrice;
    -webkit-animation-duration: 6300ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
}

How to put a delay on each loop animation in css3?

Use:

Calling the keyframe via animation:

animation:keyFrameName 6s infinite;
-webkit-animation:keyFrameName 6s infinite;
-moz-animation:keyFrameName 6s infinite;
-o-animation:keyFrameName 6s infinite;

Making a delay for animation:

animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;

That should be set in each animation class or id that you have an animation on

Simple CSS Animation Loop – Fading In & Out Loading Text

As King King said, you must add the browser specific prefix. This should cover most browsers:

@keyframes flickerAnimation {  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-o-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-moz-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-webkit-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}.animate-flicker {   -webkit-animation: flickerAnimation 1s infinite;   -moz-animation: flickerAnimation 1s infinite;   -o-animation: flickerAnimation 1s infinite;    animation: flickerAnimation 1s infinite;}

<div class="animate-flicker">Loading...</div>

Loop and delay infinite CSS3 animation using jQuery

It looks like the code is not working as you expect because you are trying to attach 2 different behaviours to the same "onAnimationEnd" event.

You can avoid this confusion by "unhooking" any events from the animationEnd event with .off().
before attaching the new behaviour using .on().

I've split your code in to two separate functions so that you can set them up to continue firing continuously in a loop.

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.sticker').on(animationEnd, addBounceOut);
function addBounceOut() {    var $this = $(this);    $this.removeClass('bounceIn').addClass('bounceOut').off(animationEnd).on(animationEnd, addBounceIn);}
function addBounceIn() {    var $this = $(this);    setTimeout(function () {        $this.removeClass('bounceOut').addClass('bounceIn').off(animationEnd).on(animationEnd, addBounceOut);    }, 1000);}

.sticker {  display: inline-block;  background-repeat: no-repeat;  background-size: contain;  background-position: center center;  width: 12vw;  height: 12vw;  position: absolute;  z-index: 1;  animation-duration: 1s;}
.sticker.one {  background-color: orange;  top: 7%;  left: 15%;  animation-delay: 1s;}
.sticker.two {  background-color: green;  top: 14%;  right: 11%;  animation-delay: 2s;}
.sticker.three {  background-color: blue;  top: 43%;  right: 22%;  animation-delay: 3s;}
.sticker.four {  background-color: red;  top: 60%;  left: 10%;  animation-delay: 4s;}

<link href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a class="sticker one animated bounceIn" href="#"></a><a class="sticker two animated bounceIn" href="#"></a><a class="sticker three animated bounceIn" href="#"></a><a class="sticker four animated bounceIn" href="#"></a>

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);}
}

---

Related Topics