ローディングについて

[EUROU]

下記のところまでは実装できたのですが、

フェードインがうまく表示されません。

目標としては、SVG画像が浮かび上がってくるようにしたいのですが、どのようにしたら良いでしょうか。

<aside id="loader" aria-hidden="true">
<div class="loader">
<div class="loader__inner">
<div class="container"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="180"
height="123"
>
<g>
<image x="0" y="0" width="180" height="123"
xlink:href="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAB7CAYAAADdc6pTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAFwHSURBVHhe7X0FgFZF9/7Z7i5aukERCRWkBBGkDEAQ/MQOQEXRz0IxEEVA/ERCQhFBRUQsQASkQ0G6O5Zdtrvv/3nOvHf3dUVlQRZ//Pcsw625M2fOPHPmnJm587oEuHtYVkGBWPyzRFxcX（長いので以下省略）="/>
</g>
</svg>
</div>
</div>

<style>
@keyframes fadeInloader {
0% {
opacity: 0;
visibility: hidden;
}

100% {
opacity: 1;
visibility: visible;
}
}

@keyframes fadeOutloader {
0% {
opacity: 1;
visibility: visible;
}

100% {
opacity: 0;
visibility: hidden;
}
}

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: visible;
will-change: opacity, visibility;
animation: fadeOutloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

.loader--fadeOut {
animation: fadeInloader 1s forwards;
}

.loader__inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.loader__image {
opacity: 98%;

width: 200px;
height: auto;
max-height: 100%;

}
</style>
<script>
(function () {
const keyName = 'visited';
if (!sessionStorage.getItem(keyName)) {
sessionStorage.setItem(keyName, true);
} else {
document.getElementById("loader").style.display = "none";
}
})();
</script>
</aside>

ご回答いただけますと幸いです。

よろしくお願いいたします。

[Qcoltd · Accepted solution]

@EUROU 様

質問者様の要望をしっかり把握できていない可能性が高いのですが、

.loaderの記述を下記に変更する、ではやりたいことと異なりますか？

.loader {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
background-color: black;
width: 100vw;
height: 100vh;
opacity: 1;
visibility: hidden;
will-change: opacity, visibility;
animation: fadeInloader 0.5s forwards;
animation-delay: 2s;
pointer-events: none;
}

ご参考まで。

(キュー田辺)

[EUROU]

お忙しい中お返事ありがとうございました。

問題解決いたしました

誠にありがとうございました。