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

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

我有一张云从右向左滑动的图像，上面有一个无限的环。这是伟大的作品，我喜欢CSS3动画，但我找不到任何关于添加垂直动画的信息

如果这可以实现我的云图像稍微上下移动，随机移动是可能的，所以它们不只是直接滑动，那将是史诗般的。我对CSS3动画不熟悉，因此我读了一些关于关键帧的

，但是，我尝试了几次基于

%

的关键帧，但都没有成功地让它们工作

这是我需要做的，还是最好只使用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 */

如果您对此有任何意见，我们将不胜感激，如果您还需要什么，请告诉我

---

%

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

我将动画分为两部分，以便于理解

@-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;

---

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

哦，老兄，云大小的第三个动画很有创意！！我一回到家就会试试，但小提琴正好显示了我需要做什么，非常感谢！也谢谢你简化了代码，因为我写的东西看起来真的很可怕。