Pause Animation Between Each Rotation For Five Seconds

I am working on this demo. How can I add five seconds delay to this animation between each rotate?

Solution 1:

You can set the overall animation time to 9 seconds (= 4 seconds for animation + 5 seconds for pause) and adjust the percentage steps accordingly, calculating the percentage of 4 seconds in relation to 9 seconds (= app. 44%)

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    44% {
        transform: rotate(0deg);
    }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="card">A</div>

Addition: Second version, where the pause is between the forward and backward rotation:

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 9s infinite;
}

@keyframes rotate {
    22% {
        transform: rotate(90deg);
    }
    78% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="card">A</div>

Another addition: Third version, with pauses between all rotations:

(just adjust the percentage values and animation time as desired)

.card {
    background: #00f;
    width: 100px;
    height: 100px;
    animation: rotate 20s infinite;
}

@keyframes rotate {
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(0deg);
    }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="card">A</div>

Solution 2:

You could do as suggested, and add a longer delay, or you could transition the keyframes between percentages to show a more notable gap between iterations if desired.

More here

.card {
  background: #00f;
  width: 100px;
  height: 100px;
  animation: rotate 5s infinite;
  -webkit-animation: rotate 5s infinite;
}

@-webkit-keyframes rotate {
  20%,100% {
    transform: rotate(90deg);
  }
}

@keyframes rotate {
   0%,25% {
    transform: rotate(90deg);
  }
  25%,50% {
    transform: rotate(-90deg);
  }
  50%,80% {
    transform: rotate(90deg);
  }
  80%,100% {
    transform: rotate(-90deg);
  }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="card">A</div>