CSS动画。滑入10秒后无限上下移动

Question

我目前有一个图像“ float ”。所以它在 10 秒内上下移动。但我真正希望它做的是在 10 秒内从 Canvas 上滑入，然后无限漂浮。

我现在的代码只是让它上下 float ，我正在努力添加部分幻灯片。我是 CSS 动画的新手，所以非常感谢任何帮助。

这就是我目前所拥有的。

.shake-vertical {
    -webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

@keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

Answer 1

考虑到您的图片有一个 class 的 ball。您可以将此 CSS 添加到您的 Existing CSS:

@keyframes slide-in {
    from{
        margin-right: -100px;
    }
    to{
        margin-right: 0;
    }
}
.ball{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    float: right;
    animation:  slide-in 10s forwards,/*forwards keeps the ball at final position*/
                shake-vertical 15s infinite 10s both;
                /*
                 * Two animations applied
                 * comma separated
                 * shake-vertical has a 10 second delay specified by '10s'
                 * the delay should be same as the duration of first animation
                */
}

我已经添加了注释以供解释，但如果您需要更多，请随时发表评论。