CSS部分迭代

Question

我在考虑制作一个动画，例如，一个圆圈从屏幕/网站的顶部下降到底部，然后开始无休止地旋转。我有这个想法，但我不知道如何用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%”步骤中进行迭代。请给我一些建议

Answer 1

您可以通过在相关的CSS动画属性之后按顺序列出它们的设置来在CSS中链接动画。

至关重要的是，您需要设置动画顺序及其各自的持续时间：

动画：下降1s，旋转2s

然后将它们按顺序排列：

动画延迟：0,1s

所以...上面基本上说的是坠落动画会持续1秒，马上播放...然后1秒后播放旋转动画（当坠落完成）

同样重要的是指定只播放一次下降动画，但循环旋转：

动画-迭代-计数：1，无限；

重要的是，不要在完成时重置下降动画状态。。。因此，圆圈位于页面底部，用于旋转。。保持周期性：

动画填充模式：转发，两者；

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);
    }
}