是否可以使用 CSS3 动画在无限滚动的同时上下移动图像？

Question

我有一个问题，我希望只用 CSS3 动画就可以实现，但如果需要使用 jQuery 动画，那也没关系。 :]

我有一张云从右向左滑动的图像，上面有一个无限循环。这很好用，我很喜欢 CSS3 动画，但我找不到任何关于向它们添加垂直动画的信息。

如果这可以实现我的云图像稍微上下移动，随机是可能的，所以它们不只是直接滑过，那将是史诗般的。我是 CSS3 动画的新手，所以我在 keyframes 上读过一些东西，但是，我尝试过几次使用基于 % 的关键帧，我并没有成功地让它们工作。

这是我需要做的，还是最好只使用 jQuery 来达到我想要的效果。

CSS

.clouds {
    width: 20em;
    position: absolute;
    top: 1em;
    -webkit-animation-name: Clouds;
    -webkit-animation-duration: 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: Clouds;
    -moz-animation-duration: 50s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: Clouds;
    -ms-animation-duration: 50s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
}

@media only screen and (max-width: 680px) {
  .clouds {
    width: 25%;
    top: 3em;
  }
}

/* Clouds CSS3 animations */

@-webkit-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-moz-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-ms-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}

/* End Clouds CSS3 Animation */

JSFIDDLE

对此的任何意见将不胜感激，如果您需要其他任何信息，请告诉我！

My Portfolio Link

Answer 1

基于% 的关键帧应该可以正常工作：JSFIDDLE

为了便于理解，我将动画分成两部分。

@-webkit-keyframes Clouds-h {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
    }
}

@-webkit-keyframes Clouds-v {
    from {
        top: 3em;
    }
    50% {
        top: 2em;
    }
    to {
        top: 3em;
    }
}

并将它们放在一行中：

-webkit-animation: Clouds-h 50s linear infinite, Clouds-v 10s ease-in-out infinite;

通过这种方式，您可以轻松地调整动画以制作复杂的动画。就像为云大小添加第三个动画一样。