使這個CSS3動畫旋轉只旋轉一次

我試圖動畫從0度旋轉到任何程度，我想它結束（讓我們說300度，無所謂）的餅圖。有一個底層的圓圈，其中一個在頂部旋轉。就像現在這樣，餅圖旋轉360度，然後以最終度數位置結束（本例中爲300）。目前它只能在Chrome中使用。使這個CSS3動畫旋轉只旋轉一次

JSFiddle

我的HTML：

<div class="spinner"> 
    <span><em></em></span> 
    <span><em></em></span> 
</div>

我的CSS：

.spinner { 
    width: 250px; 
    height: 250px; 
    background: #aaa; 
    margin: 0 auto; 
    position: relative; 
} 
.spinner:after { 
    position: absolute; 
    content: ""; 
    width: 0%; 
    height: 0%; 
    border-radius: 100%; 
    background: #fff; 
    top: 10%; 
    left: 10%; 
} 
.spinner span em { 
    background: #0e728e; 
    -webkit-animation-duration: 6s; 
} 
@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
} 
.spinner { 
    border-radius: 100%; 
    position: relative; 
} 
.spinner span { 
    width: 50%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
} 
.spinner span:first-child { 
    left: 0; 
} 
.spinner span:last-child { 
    left: 50%; 
} 
.spinner span em { 
    border-radius: 250px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
} 
.spinner span:first-child em { 
    left: 100%; 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    -webkit-animation-name: rotate-lt; 
    -webkit-transform-origin: 0 50%; 
} 
.spinner span:last-child em { 
    left: -100%; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    -webkit-animation-name: rotate-rt; 
    -webkit-transform-origin: 100% 50%; 
}

來源

2013-08-30 itsclarke

好的動畫，我想知道答案也。 –

我也是...很喜歡它.. –

這有點棘手，因爲這裏真的有兩個圓圈旋轉。實際上，你想要一個（旋轉-RT）中途停止，而其他（旋轉-LT）繼續餘下的120度（300度總）：

@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
}

http://jsfiddle.net/BkJY7/7/

編輯：澄清，如果你想這個旋轉小於180度，你會刪除第二個動畫關鍵幀規則：http://jsfiddle.net/BkJY7/8/

來源

2013-08-30 04:29:38 skyline3000

我愛你！你完全被邀請參加我的生日派對！我會繼續爲所有未來的人更新我的代碼。爲了讓人放心，是否有理由將'50％'從'rotate-rt'中刪除，而不是將其改爲'180deg'？除了減少編碼外，就是。 – itsclarke

這是唯一的原因。我刪除了那些不需要保持時間/速度相同的那些。 – skyline3000

您正在尋找-webkit-animation-fill-mode: forwards;其在年底停止動畫。你可以在這裏閱讀更多關於它：Can't stop animation at end of one cycle

來源

2013-08-30 01:27:59

謝謝，這有助於停止在最後，現在我只需要弄清楚如何擺脫額外的旋轉... – itsclarke

使這個CSS3動畫旋轉只旋轉一次

回答

相關問題