讓CSS3旋轉開始緩慢然後結束緩慢？

這不是一個可以通過使用ease-in解決的問題。讓CSS3旋轉開始緩慢然後結束緩慢？

如果我有一個元素，我想在CSS3中旋轉一段時間，但是開始慢，結束速度慢，我該怎麼做？

CSS

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

div{ 
    background-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(51,51,51,1) 20%,rgba(0,0,0,1) 20%,rgba(51,51,51,1) 40%,rgba(0,0,0,1) 40%,rgba(51,51,51,1) 60%,rgba(0,0,0,1) 60%,rgba(51,51,51,1) 80%,rgba(0,0,0,1) 80%,rgba(51,51,51,1) 100%); 
    width: 200px; 
    height: 200px; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 60.5; 
    -webkit-animation-timing-function: ease-in; 
}

HTML

<div></div>

我似乎無法弄清楚如何做到這一點。我的動畫總共運行了121秒，因爲完成一次旋轉需要2秒，因此60.5次旋轉總共需要121秒（如果我的數學不正確，請告訴我）。這工作正常，除了我希望div開始慢速旋轉，然後完成所有59次旋轉，然後結束最後一個緩慢。

我想爲此使用純CSS，如果可能的話。

來源

2012-08-15 Charlie

如果你不介意加入_a little_ JavaScript中，你可以寫3個動畫，聽'animationend'事件改變關鍵幀名字... – Passerby 2012-08-15 03:12:56

反正有這樣做沒有JS？：D – Charlie 2012-08-15 03:16:35

如果它真的必須是純粹的CSS ......將3個'div'包裝在一起並使用3個動畫，其中一個用於大多數'div'旋轉第一輪，一個延遲幾秒並旋轉「in most 「div」進行59輪，一次延遲~100秒，並在最後一輪旋轉中間「div」。你當然需要做數學運算:) – Passerby 2012-08-15 03:49:03

對不起，我沒有的jsfiddle ...

編輯：我以前在我的實驗的相對溶液：CSS3 Clock，可能是計數爲半小提琴？：d

編輯＃2：通過的jsfiddle提供@Charlie：http://jsfiddle.net/7DPnc

如果真的必須是純CSS，我建議包裝3 divš在一起並分別旋轉他們：

CSS

div.first_round 
{ 
-webkit-animation-duration:3s; 
-webkit-animation-iteration-count:1; 
} 
div.last_round 
{ 
-webkit-animation-duration:3s; 
-webkit-animation-iteration-count:1.5; 
-webkit-animation-delay:100s; /* you'll have to do the math */ 
} 
div.main_round 
{ 
-webkit-animation-duration:2s; 
-webkit-animation-delay:3s; 
-webkit-animation-iteration-count:59; 
-webkit-animation-timing-function:linear; 
}

HTML

<div class="first_round"> 
<div class="last_round"> 
<div class="main_round"> 
</div> 
</div> 
</div>

或者如果你不介意使用一點JS，聽animationend事件...

來源

2012-08-15 04:12:50 Passerby

http://jsfiddle.net/7DPnc/這難道不是更流暢嗎？ – Charlie 2012-08-15 04:29:27

@Charlie OK你明白了:) – Passerby 2012-08-15 04:40:11

你需要60秒在120秒內旋轉吧？

讓我們首先更改迭代計數爲1。

-webkit-animation-iteration-count:1;

且持續時間爲120秒

-webkit-animation-duration: 120s;

現在設置自旋的量。（360deg x 60spins）

@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(21600deg); } 
}

現在我們將修改設置時間。（剃旋轉關閉每邊，添加到新的一節）

@-webkit-keyframes spin { 
    10% { -webkit-transform: rotate(360deg); } 
    90% { -webkit-transform: rotate(20880deg); } 
    100% { -webkit-transform: rotate(21600deg); } 
}

最後，我們設置了寬鬆的功能，以避免會導致如果使用曲線關鍵幀段之間發生停止線性。（自如，輕鬆淘汰等替代，以明白我的意思）

-webkit-animation-timing-function: linear;

您可以輕鬆地調整，通過改變持續時間的關鍵幀比例的時機，和。

DEMO

來源

2013-09-27 17:41:20

讓CSS3旋轉開始緩慢然後結束緩慢？

回答

相關問題