我正在考虑制作一个动画，其中，例如，一个圆从屏幕/网站的顶部落到底部，然后它开始旋转而没有结束。我有这个想法，但我不知道如何在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

相关问题