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

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 秒），我给它们都设置了相同的动画time/rate所以它们都在移动但显示延迟效果。

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

How do I delay the start of some clouds on this webpage?

html

css

web

css-animations

frontend