CSS Keyframe-Animation Timing-Funktion über mehrere Iterationen

Question

Ich habe Karussell mit Animation und angegebene Animationsgeschwindigkeit:

animation-timing-function: cubic-bezier(.27,.97,.86,1); 

@keyframes back-y-spin { 
    0%  { transform: rotateY(360deg); } 
    100% { transform: rotateY(0deg); } 
} 

Ich frage mich, wie konnte ich es 2, drehe 3 usw. Zeiten aber Timing-Funktion für ganze Drehung anzuwenden. Zum Beispiel, wenn ich animation-iteration-count: 2; Carouser gestartet, dann wird langsamer, dann stoppt und dann wiederholt - schneller, langsamer, gestoppt.

Was ich will: Karussell gestartet, Geschwindigkeit erhöht dann gedreht N-mal dann Geschwindigkeit verringert und es wird gestoppt.

Hier ist beispielsweise mit denen ich gearbeitet: https://codepen.io/anon/pen/OgeOEQ

Answer 1

Versuchen Sie es mit transform: rotate(calc(360deg * 3));. Beispiel unten.

.shape { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    position: absolute; 
 
    left: calc(50% - 50px); 
 
    top: calc(50% - 50px); 
 
    
 
    animation: rotate 5s; 
 
    animation-timing-function: cubic-bezier(.9,.1,.1,.9); 
 
} 
 

 
@keyframes rotate { 
 
    0% { transform: rotate(calc(360deg * 6)); } 
 
    100% { transform: rotate(0deg); } 
 
}

<div class="shape"></div>