CSS 3停止旋轉動畫頁面加載後N秒後

Question

我對css3沒有太多的瞭解，並且我得到了使代碼無限旋轉的代碼片段。

.spin { 
    -webkit-animation: rotation 0.4s linear infinite; 
    animation: rotation 0.4s linear infinite; 
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 
    transform: translateX(100%) translateY(-100%) rotate(45deg); 
} 

@-webkit-keyframes rotation { 
    0%  { -webkit-transform: rotate(0deg); } 
    50%  { -webkit-transform: rotate(-180deg); } 
    100% { -webkit-transform: rotate(-360deg); } 
} 

@keyframes rotation { 
    0%  { transform: rotate(0deg); } 
    50%  { transform: rotate(-180deg); } 
    100% { transform: rotate(-360deg); } 
} 

我想在幾秒鐘後停止旋轉，但我不知道要改變什麼。我試圖改變infinite到3但它停下來，把我的DIV別的地方。我需要一個平穩的停止並保留div的原始位置。

Answer 1

看到這裏jsfiddle

元素是移動的，因爲translate

代碼：

.spin { 
height:50px; 
width:50px; 
background:red; 
-webkit-animation: rotation 0.4s linear 3; 
animation: rotation 0.4s linear 3; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
} 

你應該知道，infinite是animation-iteration-count財產指定的值應該播放動畫的次數。所以不是秒。

，如果你想停止後N秒使用animation-duration，我建議你把動畫聲明成零件，像這樣：

jsfiddle

爲前你想要的旋轉旋轉2秒，如果您將animation-duration設置爲2秒，則整個動畫需要2秒才能完成，而這不是您想要的。您希望您的spin到2秒的快速旋轉，所以你需要計算animation-iteration-count這樣2秒/動畫持續時間

說你要在0.5秒內完成1圈，你設置animation-duration:0.5s然後animation-iteration-count至2秒/0.5 = 4

代碼：

spin { 
    height:50px; 
    width:50px; 
    background:red; 

    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    animation-name:rotation; 
    animation-delay:0s; 
    animation-duration:0.5s; 
    animation-iteration-count:4; 
    animation-fill-mode:backwards; 
} 

有關動畫的更多信息，在這裏讀到：CSS3 animation Property