[分享]css动画等待是不显示

最近在做网站的时候，发现一个问题：当我使用CSS动画设定了等待时间时，等待时间内页面出现的所有元素都不会显示，直到动画结束后才会一起显示出来。一开始，我以为这是我的代码有问题，但是在仔细检查代码后，我...

最近在做网站的时候，发现一个问题：当我使用CSS动画设定了等待时间时，等待时间内页面出现的所有元素都不会显示，直到动画结束后才会一起显示出来。

一开始，我以为这是我的代码有问题，但是在仔细检查代码后，我发现问题并不在CSS动画本身，而是在等待时间的设定上。

.timeout{
    animation: fadein .5s ease-in-out;
    animation-delay: 1s;  /* 设置等待时间为1秒 */
}
@keyframes fadein{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
} 

以上是一个简单的CSS动画，元素将在0.5秒内渐变出现。我们可以使用animation-delay属性设置等待时间，这里我设置为1秒。然而，在等待时间内，所有元素都不会显示，即使它们并没有任何与动画有关的属性。

我查看了各种资料，最后发现这个问题是由于浏览器不会并行处理CSS动画和其他元素的渲染所导致的。也就是说，浏览器会首先完成CSS动画的渲染，然后才会开始渲染其他元素。

为了解决这个问题，我们可以使用JavaScript的定时器来代替animation-delay属性，将等待时间分割成几个小段，这样就可以让页面的其他元素在等待时间内也可以正常显示了。

setTimeout(function(){
    document.querySelector(".timeout").classList.add("show");
}, 1000);  /* 将等待时间分割成1000ms */ 

以上是代替animation-delay的JavaScript代码，将等待时间分割成1000毫秒。当定时器启动后，我们可以添加一个.show样式，使元素逐渐显示出来。

总之，我们需要了解的是，在CSS动画的等待时间内，浏览器不会渲染其他元素。要避免这个问题，我们可以使用JavaScript的定时器来代替animation-delay属性。