Przerwa między animacjami klatek kluczowych

Question

otrzymała prostą animację z klatkami kluczowymi.

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

} 

i

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

Czy jest możliwe aby dodać pauzę między tym animacji klatek kluczowych? Jak 5 sekund? Wiem, że istnieje -webkit-opóźnienie-animacji, ale opóźnia to tylko początek animacji.

P.S. Wiem, że jest to tylko prefiks webkita ... na końcu przechodzę przez prefiks.

Answer 1

dostał obejście, ale wygląda nieco brudny

@-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

Po zmaga się z tym problemem i pomoc Denny Mueller Odkryłem, że kluczem jest, aby zatrzymać przed 100%.

Opóźnienia można użyć, aby rozpocząć z opóźnieniem, a po pierwszej iteracji opóźnienie będzie ilością czasu pozostałą po zakończeniu animacji.

Oto co kiedyś dla mojego realizacji:

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

Jak widać, ja zatrzymać w 94%, a pozostałe 6% jest używany, aby zatrzymać się na pierwszej klatce.