ajax - CSS3 - 几秒钟后显示一个元素

Question

我正在使用纯 CSS3 AJAX 加载器动画，但是，我希望对其进行一些修改。

目前它只是将几个球旋转成一个圆圈，但是，我想在大约 30 秒后显示一条消息，请继续等待，并在大约 60 秒后显示另一条消息，说明事情可能失败了。

是否可以使用纯 CSS3 来完成此操作？还是需要 JavaScript 才能完成？

Answer 1

这是一个纯CSS3的动画效果JSFiddle

.animate {
    -webkit-animation: NAME-YOUR-ANIMATION 60s;
    -moz-animation: NAME-YOUR-ANIMATION 60s;
    -o-animation: NAME-YOUR-ANIMATION 60s;
    animation: NAME-YOUR-ANIMATION 60s;
    opacity: 0;
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

您需要对其他消息执行相同的操作，如果您希望它适用于所有浏览器，供应商 CSS 很重要。

Sources