直接给背景图设置动画效果会出现图片因加载过慢而显示效果不佳的情况，可以通过 JavaScript 来获取图片的加载状态。
下面来实现一个背景图片透明度渐变的效果。
首先来设置要添加背景动画的元素样式
main#background {
width: 100%;
height: 100%;
opacity: 0;
background-size: cover;
animation-delay: 0s;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
- 通过
opacity: 0;来设置背景图片加载完成之前元素的状态为不可见，这样就能够避免加载过程时的图片卡顿 - 通过
animation-fill-mode: forwards;来设置元素停留在动画完成后的样式，即透明度为 1，元素状态为可见
下面来定义动画
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
- 动画效果为透明度从 0 到 1
接下来通过 js 来获取图片的加载状况
var background = new Image();
background.src = 'https://static.pexels.com/photos/57772/pexels-photo-57772.jpeg';
background.onload = function () {
console.log('Background load complete!');
var loadbackground = document.getElementById('background');
loadbackground.style.backgroundImage = 'url(' + background.src + ')';
loadbackground.style.animationName = 'fadein';
}
- 首先来创建一个图片对象
- 通过
src属性来设置图片的链接地址 - 为图片对象添加
onload回调函数，图片加载完成将调用此函数，所以我们将在此函数中实现元素的过渡动画 - 获取到将要设置背景图片的元素
- 通过
style属性来设置该元素的背景图片及动画名
通过以上设置我们便能够实现背景图片的过渡效果了！
完整代码：
https://github.com/saynot/y-n-o/blob/master/css-javascript/background-loaded-animation.html
本文结束，感谢阅读！
