我正在考慮製作一個動畫，其中，例如，一個圓從屏幕/網站的頂部落到底部，然後它開始旋轉而沒有結束。我有這個想法，但我不知道如何在CSS中描述它。CSS部分迭代

這是我迄今所做的，並卡住：

#circle { 
    border-radius: 50%; 
    border-top-color: red; 
    width: 200px; 
    height: 200px; 
    bottom: 0px; 

#circle { 
    animation-name: falling; 
    animation-duration: 5s; 

@keyframes falling { 
    0% { 
    bottom: 100%; 
} 

    50% { 
    bottom:0%; 
} 

    100% { 
    transform: rotate(360deg); 
}

我不知道我怎樣才能使一個迭代中的「100％」的步驟。請給我一些建議

來源

2014-03-31 OTA

Demo Fiddle

你可以在CSS動畫鏈由有關CSS動畫屬性後，表中序列的設置。

最重要的是你要設置的動畫順序，以及它們各自的持續時間：

animation: falling 1s, rotate 2s;

然後排隊它們順序開始：

animation-delay: 0s, 1s;

So..the上面基本上說即下降的動畫將持續1秒鐘，立即播放...然後在1秒後播放旋轉動畫（當下降完成時）

同樣重要的是指定只打了下跌動畫一次，但環旋轉：

animation-iteration-count: 1, infinite;

重要的是，不重置完成下落動畫狀態......，所以圓停留在底部頁面，爲rotation..keep它週期性的：

animation-fill-mode: forwards, both;

HTML

<div id='circle'></div>

CSS

#circle { 
    border-radius: 50%; 
    border: 4px solid red; 
    width: 20px; 
    height: 20px; 
    bottom: auto; 
    position:absolute; 
    animation: falling 1s, rotate 2s; 
    animation-delay: 0s, 1s; 
    animation-iteration-count: 1, infinite; 
    animation-fill-mode: forwards, both; 
    -webkit-animation: falling 1s, rotate 2s; 
    -webkit-animation-delay: 0s, 1s; 
    -webkit-animation-iteration-count: 1, infinite; 
    -webkit-animation-fill-mode: forwards, both; 
} 
@keyframes falling { 
    0% { 
     bottom: 100%; 
    } 
    100% { 
     bottom:0%; 
    } 
} 
@keyframes rotate { 
    0% { 
     -webkit-transform: rotateX(0deg); 
    } 
    100% { 
     -webkit-transform: rotateX(360deg); 
    } 
} 
@-webkit-keyframes falling { 
    0% { 
     bottom: 100%; 
    } 
    100% { 
     bottom:0%; 
    } 
} 
@-webkit-keyframes rotate { 
    0% { 
     -webkit-transform: rotateX(0deg); 
    } 
    100% { 
     -webkit-transform: rotateX(360deg); 
    } 
}

來源

2014-03-31 09:14:57 SW4

CSS部分迭代

回答

Demo Fiddle

相關問題