Pause between keyframe animations

Question

got an simple animation with keyframes.

    @-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(10deg); }
    25%  { -webkit-transform: rotate(5deg); }
    50%  { -webkit-transform: rotate(10deg); }
    75%   { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(10deg); }

}

and

.class { -webkit-animation: rotation 1s infinite; }

Is it possible to add a pause between this keyframe animation? Like 5 seconds? I know there is a -webkit-animation-delay but this delays only the start of the animation.

P.S. I know its only the webkit prefix... at the end I get it through prefixr.

Answer 1

Got an workaround, but looks bit dirty

@-webkit-keyframes rotation {
        0%   { -webkit-transform: rotate(10deg); }
        5%  { -webkit-transform: rotate(5deg); }
        10%  { -webkit-transform: rotate(10deg); }
        15%   { -webkit-transform: rotate(5deg); }
        20% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(10deg); }

    }
.class { -webkit-animation: rotation 5s infinite; }

Answer 2

After struggling with this problem myself and the help of Denny Mueller I've found that the key is to stop before 100%.

You can use the delay to start with a delay and after the first iteration, the delay will be the amount of time that is left after the animation is finished.

Here is what I used for my implementation:

@-webkit-keyframes spincube {
    from,to      {                                                    }
    8%,14%       { -webkit-transform: rotateY(-90deg);                }
    24%,30%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    40%,46%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    56%,62%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    72%,78%      { -webkit-transform: rotateX(90deg);                 }
    88%,94%      { -webkit-transform: rotateX(0deg);                  }
}

As you can see, I stop at 94% and the remaining 6% is used to pause on the first frame.