如何在此网页上延迟某些云的启动？

Question

我希望从http://therealrohanm.me/Falcon-Hacks-Website/开始延迟一些云，动画延迟和转换延迟似乎都不起作用。我该如何做到这一点？

在此处查看代码：https://github.com/Meeshbhoombah/meeshbhoombah.github.io

Answer 1

检查这个小提琴：http://jsfiddle.net/0cmonc5q/

#animated-cloud-background .cloud.cloud-1 {
    top: 10%;
    -webkit-animation: animateCloud 10s linear infinite;
    -moz-animation: animateCloud 10s linear infinite;
    animation: animateCloud 10s linear infinite;

    -webkit-transform: scale(0.65);
    -moz-transform: scale(0.65);
    transform: scale(0.65);
    z-index: -5;

    animation-delay: 2s;   
    -webkit-animation-delay: 2s;

}
#animated-cloud-background .cloud {
    position: absolute;
    top: 0;
    left: -128px;
}

动画延迟正在运行，但它需要放在你的风格的动画之后。问题是它也会延迟第一帧，所以它会出现在屏幕上，直到发生延迟。我通过给云元素一个左侧位置来解决这个问题..在这种情况下，128是图像的宽度。

这个小提琴：http://jsfiddle.net/0cmonc5q/1/

显示每个图像具有不同的延迟（1到5秒），我给它们所有相同的动画时间/速率，所以它们都会移动但显示有效的延迟。