使用过渡淡入图像

Question

我是一名设计师，如果我的问题很简单，请原谅 我需要背景图像在页面加载时淡入。

此代码是由模板完成的，因此我需要更改此背景以淡入，因为整个页面已经通过wordpress上的插件淡入。

我有此代码：

body {
background-position: 100% 60px;
background-repeat: no-repeat;
transition: background-position 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media(min-width: 1025px) {
body {
    background-image: url(/wp-content/uploads/2018/08/girl-banner-desktop.png);
    background-size: 552px 616px;
}
body.load-done:not(.menu-open) {
    background-position: 100% 60px;
}
}

@media(max-width: 1024px) and (min-width: 768px) {
body.load-done {
    background-image: url(/wp-content/uploads/2018/08/girl-banner-tablet.png);
    background-size: 351px 327px;
}
body.load-done:not(.menu-open) {
    background-position: 100% 60px;
}
}

@media(max-width: 767px) {
body.load-done {
    background-image: url(/wp-content/uploads/2018/08/girl-banner-mobile.png);
    background-size: 264px 268px;
    background-position: 100% 340px;
}
selector {
    height: 397px;
}
}

@keyframes fadeInOpacity {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}