使用load事件和animation-play-state来等待图片加载完成后再开始动画

把动画的播放延迟到图片加载完成之后，很实用的技巧。

js, load

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3663
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* The magic here that makes animations wait */

.js-loading *,
.js-loading *:before,
.js-loading *:after {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.animated-header {
    background: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.animated-header:before {
    -webkit-animation: show-background 60s .5s cubic-bezier(0, 1, .5, 1) forwards;
    animation: show-background 60s .5s cubic-bezier(0, 1, .5, 1) forwards;
    background: url(/uploads/161001/lighten2.jpg) no-repeat center;
    background-size: cover;
    content: "";
    opacity: 0;
    height: 100vh;
    position: absolute;
    width: 100vw;
}
.logo,
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.loading {
    color: #aaa;
    font-size: 48px;
    display: none;
}
.js-loading .loading {
    display: block;
}
.logo svg {
    -webkit-animation: show-logo 2s 1.5s cubic-bezier(0, 1.79, .28, .73) forwards;
    animation: show-logo 2s 1.5s cubic-bezier(0, 1.79, .28, .73) forwards;
    opacity: 0;
}
@-webkit-keyframes show-background {
    0% {
        opacity: 0;
        -webkit-transform: none;
        transform: none;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(2);
        transform: scale(2)
    }
}
@keyframes show-background {
    0% {
        opacity: 0;
        -webkit-transform: none;
        transform: none;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(2);
        transform: scale(2)
    }
}
@-webkit-keyframes show-logo {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes show-logo {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

HTML

</g>
                </g>
            </g>
        </svg>
    </div>
</header>

把动画的播放延迟到图片加载完成之后，很实用的技巧。

js, load

编辑器支持Emmet

快捷键

把动画的播放延迟到图片加载完成之后，很实用的技巧。

js, load

使用Bodymovin.js制作的播放按钮等待动画

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：