如何減慢CSS中這個旋轉動畫的最後幾次迭代？

@keyframes plusRotate 

{ 

from {transform: rotate(0deg);} 

to {transform: rotate(360deg);} 

} 

green 
{ 

color: #00933B; 
animation-name: p1Eat, p1FadeInC, plusRotate; 
animation-delay: 10.9s, 15.3s, 21s; 
animation-duration: .1s, .7s, .3s; 
animation-fill-mode: forwards; 
animation-timing-function: linear, linear, linear; 
animation-iteration-count: 1, 1, 16; 
}

我想讓它在「plusRotate」的最後一次迭代中旋轉變慢。我嘗試添加一個單獨的動畫1次迭代，具有更長的持續時間，但它不旋轉！基本上我認爲它打破了某種程度。如何減慢CSS中這個旋轉動畫的最後幾次迭代？

我的代碼的其餘部分工作正常，唯一的問題是我想要「+」（字符加）旋轉的部分。現在，他們旋轉罰款。唯一的問題是，因爲它們被設置爲

animation-timing-function: linear

我可以設置動畫計時以任何方便的功能，他們不減速至停止，但隨後每次迭代中簡化。我希望它不斷旋轉，只在最後旋轉時緩解。任何想法如何做到這一點？

我已經嘗試過這樣做，但隨後的長處不旋轉可言：

@keyframes plusRotate 

{ 

from {transform: rotate(0deg);} 

to {transform: rotate(360deg);} 

} 

@keyframes plusRotateEnd 

{ 

from {transform: rotate(0deg);} 

to {transform: rotate(360deg);} 

} 



green 
{ 

color: #00933B; 
animation-name: p1Eat, p1FadeInC, plusRotate, plusRotateEnd; 
animation-delay: 10.9s, 15.3s, 21s, 25.8s; 
animation-duration: .1s, .7s, .3s, .5s; 
animation-fill-mode: forwards; 
animation-timing-function: linear, linear, linear, ease-out; 
animation-iteration-count: 1, 1, 15, 1; 
}

來源

2015-10-05 Jack F.

這是我自己的職位，但我已經想出了一個解決方法。

我不得不做兩個動畫，而只需要設置旋轉角度，使其旋轉多少次 - 即360 * numOfSpins。

然後我將迭代計數設置爲1，並使用緩出。

這裏要學習的一點是rotate（）;可以採用大於360的度數。

來源

2015-10-05 06:56:23

您可以使用％來告訴它按步驟執行動畫。你甚至可以用它做酷炫的動畫。

@keyframes k1 { 
 
    from { 
 
     transform: rotate(0deg); 
 
    } 
 
    to { 
 
     transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes k2 { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 
    90% { 
 
     transform: rotate(350deg); 
 
    } 
 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
} 
 

 
.green { 
 
    width: 50px; 
 
    height: 50px; 
 
    color: #00933B; 
 
    animation-name: k1; 
 
    animation-duration: 10s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.blue { 
 
    width: 50px; 
 
    height: 50px; 
 
    color: #00933B; 
 
    animation-name: k2; 
 
    animation-duration: 10s; 
 
    animation-fill-mode: forwards; 
 
}

<div class="green">GREEN</div> 
 
<div class="blue">BLUE</div>

來源

2015-10-05 07:01:58

有你的代碼的幾個問題：

儘量用乾淨的格式，所以最好的可讀性。
選擇器似乎不是正確的，你可能想要一個類選擇器，如.green。

你的動畫看起來不錯，但有點複雜。我將它簡化爲一個更簡單的示例，並按照我的意見按預期工作：Here's the JSFiddle。

對於未來的問題：爲他人重現問題提供一個最簡單的工作示例總是很好的。

來源

2015-10-05 07:20:20

如何減慢CSS中這個旋轉動畫的最後幾次迭代？

回答

相關問題