重複動畫2或3次，然後鬆開它

Question

如何在放鬆之前重複旋轉動畫x次？

例如：

#spin-please { 
 
\t background: green; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t animation: spin 3s infinite ease-in-out; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    49% { 
 
    transform: rotate(359deg); 
 
    } 
 
    50% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div id="spin-please"> 
 
</div>

我的動畫現在是不是很順利，在所有（你可以在第一和第二旋轉之間看到的），並且存在之間的寬鬆2次旋轉，我只在第一次旋轉開始時和第二次旋轉結束時（或第三次，如果我選擇再旋轉一次）。

緩和==>旋轉1 ==>旋轉2 ==>緩出

這是可行的CSS？

Answer 1

而不是重複動畫無限次的，你可以指定重複的次數是這樣的：

animation: spin 3s 3 ease-in-out; /* 3secs, repeat 3 times */ 

更多的例子見animation iteration count。

也看到animationshort-hand docs在一次設置所有屬性的有用（如您的代碼做）

我不知道有什麼期望的結果您正在尋找，但我修改了動畫顯示紡紗發生三次（有一些反向旋轉以及）

#spin-please { 
 
    background: green; 
 
    width: 50px; 
 
    height: 50px; 
 
    /* @keyframes duration | timing-function | delay | 
 
     iteration-count | direction | fill-mode | play-state | name 
 
    */ 
 
    animation: 1s 3 spin; 
 
    animation-timing-function: ease-in, linear, ease-out; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div id="spin-please"> 
 
</div>

Answer 2

的問題是完全沒有，因爲你animation不順暢， 與keyframes的問題，根據這個代碼

49% { 
    transform: rotate(359deg); 
    } 
    50% { 
    transform: rotate(0deg); 
    } 

動畫要做360deg旋轉在很短的時間爲1％（之間49% - 50%）任何animation-timing-function值動畫不順暢，試試這個代碼：

#spin-please { 
 
\t background: green; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t animation: spin 3s ease infinite; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    animation-timing-function: ease-out; 
 
    transform: rotate(0deg); 
 
} 
 
50% { 
 
    transform: rotate(180deg); 
 
} 
 
100% { 
 
    animation-timing-function: ease-in; 
 
    transform: rotate(360deg); 
 
} 
 
}

<div id="spin-please"> 
 
</div>

記住，你可以改變你的 animation-timing-function在關鍵幀。有關 animation-timing-function的更多詳情。