html - 如何延迟此网页上某些云的开始？

Question

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

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

Answer 1

检查这个 fiddle :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;
}

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

还有这个 fiddle :http://jsfiddle.net/0cmonc5q/1/

显示每张图像都有不同的延迟(1 到 5 秒)，我给了它们所有相同的动画时间/速率，所以它们都移动但显示延迟效果。