@keyframesのhtmlコード挿入場所がわからない。

Question

前提・実現したいこと

cssで自作したオープニングシャッター（ファーストビュー）を実装したい。

発生している問題・エラーメッセージ

固定ページをフロントページ に設定しているのですが、html欄やheader.phpなどにhtmlコードを記述しても、ページ全体にアニメーションが実装されない。

該当のソースコード

・css
.bg {
width: 100vw;
height: 100vh;
background: #773c30;
animation: bgAnime 1s linear 1.8s forwards;
}

.text {
text-align: center;
font-size: 6vw;
color: #fff;
height: 1em;
line-height: 1.2;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 7;
animation: textAnime2 .1s linear 1.5s forwards;
}

.text:after{
content: "";
width: 24vw;
height: 1.2em;
background: #773c30;
position: absolute;
top: 0;

left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 9;
animation: textAnime1 1.3s linear forwards;

}

/keyframe/

@keyframes textAnime1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

@keyframes textAnime2 {
0%{
transform: rotate(0);
}
100%{
transform: rotate(-10deg);
}
}

@keyframes bgAnime {
0%{
opacity: 1;
}
99%{
opacity: 0;
}
100%{
opacity: 0;
display: none;
}
}

・html

<div class="bg"> <p class="text">サイト名</p> </div>

試したこと

<div class="bg"> <p class="text">サイト名</p> </div> 上記のコードを固定ページのhtml欄に挿入。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

何が質問の本題なのか分からん

[tgfjt]

1. WordPress で実装する話でしょうか？
2. であれば、 `style.css` に CSS を書いて、 `front-page.php` にHTML入れたよ、ということですか？
3.「ページ全体にアニメーションが実装されない」をもうすこし詳しくおしえてください！画面全体に行き渡らない？CSS/HTMLが反映されない？など