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

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

1 个答案: