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

Question

我有一个问题，我希望我可以用CSS3动画来实现，但如果有必要使用jQuery animate，那也没关系。

我有一张云从右向左滑动的图像，上面有一个无限循环。这很好用，我喜欢 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 */

吉斯菲德尔

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

我的投资组合链接

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;

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