Demo Fiddle

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

我不知道如何在＆＃34; 100％＆＃34;中进行迭代。步。请给我一些建议

Answer 1

Demo Fiddle

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

至少要设置动画顺序及其各自的持续时间：

animation: falling 1s, rotate 2s;

然后将它们排队以按顺序开始：

animation-delay: 0s, 1s;

所以..上面基本上说下降动画将持续1秒，立即播放...然后在1秒后播放旋转动画（落下时已完成）

指定仅播放下降动画一次也很重要，但循环旋转：

animation-iteration-count: 1, infinite;

重要的是，不要在完成时重置下降的动画状态...所以圆圈停留在页面的底部，以便旋转。保持循环：

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

CSS部分迭代

1 个答案:

Demo Fiddle