CSS關鍵幀動畫的計時功能

我有一個動畫輪播和指定的動畫速度：CSS關鍵幀動畫的計時功能

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

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

我不知道如何可以旋轉它2，3，等次，但適用的計時功能，以全迴轉。例如，如果我指定animation-iteration-count: 2; carouser開始，然後變慢，然後停止然後重複 - 更快，更慢，停止。

我想要的是：旋轉木馬開始，速度增加，然後旋轉N次，然後速度下降，停止。

這裏是例如我工作：使用transform: rotate(calc(360deg * 3));https://codepen.io/anon/pen/OgeOEQ

來源

2017-07-19 Alex G.P.

只需旋轉'720deg'，而不是'360deg'？ –

@JohanKarlssonif我理解你，它會旋轉，然後只有30度。不是我想要的。需要從360 * 3deg旋轉到0度。 –

'0％{transform：rotateY（720deg）;} 100％{transform：rotateY（0deg）;}' –

嘗試。下面的例子。

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

來源

2017-07-19 13:51:55 Nicholas

CSS關鍵幀動畫的計時功能

回答

相關問題