0

Why does animation-delay not works properly in between each animation? For example between each animation iteration I want to have a little pause. How can I get around this issue?

.fa-shake {
        animation-name: fa-shake;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-direction: normal;
        animation-delay: 1s;
        animation-iteration-count: infinite;
    width:150px;
    height: auto;
    }

    @keyframes fa-shake {

        0%,
        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }

        20%,
        40%,
        60%,
        80% {
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
    }
<img class="fa-shake" src="https://parspng.com/wp-content/uploads/2022/03/telephonepng.parspng.com-2-600x643.png">
Lucas
  • 135
  • 6

1 Answers1

0

animation-delay specifies the delay before the animation starts and NOT the delay in between iterations.And there is solution provided in this post on this link.

Cvijan Djukanovic
  • 111
  • 6
  • Welcome to Stack Overflow! We have a duplicate answer mechanism to flag questions as duplicates. That said, to make this a better answer - before it potentially gets closed as a duplicate, you can post the code FROM the answer and keep the link that references the answer. – disinfor Jan 26 '23 at 16:07