やりたいこと

サイトトップにアクセスしたら全画面のCSSアニメーションを表示
リロードでも表示
サイト内からトップアクセスした時は表示しない

実装

フロントページの<body>の直下あたりに以下のタグを追加。

header.php

<?php if(is_front_page()): ?>
<div id="enter">
	<div id="enter-obj1">
	<p><span class="line1">こ</span><span class="line2">ん</span><span class="line3">に</span><span class="line4">ち</span><span class="line5">わ</span></p>
	</div>
</div>
<?php endif; ?>

JavaScriptを追加します。
<head>内もしくは、</body>の直前に追加してください。

header.php

<?php if(is_front_page()): ?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript">
$(function() {
	//top animation を実行
	if (window.performance) {
		if (performance.navigation.type === 1) {
			// リロードされた
			topAnime();
		} else {
			// リロードされていない
			var ref = document.referrer; // リファラ情報を得る
			var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る

			// ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)
			var sStr = "^https?://" + hereHost;
			var rExp = new RegExp( sStr, "i" );

			// リファラ文字列を判別
			if( ref.length == 0 ) {
				// リファラなしの場合
				topAnime();
			}
			else if( ref.match( rExp ) ) {
				// マッチした場合＝アクセス元が自サイト内の場合
				$('#enter').addClass('end');
			}
			else {
				// マッチしない場合＝アクセス元がサイト外の場合
				topAnime();
			}
		}
	}
	function topAnime(){
		if($('#enter').length){
			$('body').addClass('runanime');
			$('#enter p span.line1').delay(1000).queue(function(){
				$(this).addClass('run').css('opacity','1');
			});
			$('#enter p span.line2').delay(2000).queue(function(){
				$(this).addClass('run').css('opacity','1');
			});
			$('#enter p span.line3').delay(3000).queue(function(){
				$(this).addClass('run').css('opacity','1');
			});
			$('#enter p span.line4').delay(4000).queue(function(){
				$(this).addClass('run').css('opacity','1');
			});
			$('#enter p span.line5').delay(5000).queue(function(){
				$(this).addClass('run').css('opacity','1');
			});
			// アニメーションの終了処理
			$('#enter div#enter-obj1').delay(7000).queue(function(){
				$(this).addClass('outrun').css('opacity','0');
			});
			$('#enter').delay(8000).queue(function(){
				$(this).addClass('end');
				$('body').removeClass('runanime');
			});
		}
	}

});
</script>
<?php endif; ?>

トップページにアクセスした際のリファラなどを元に、アニメーションを実行する/しないを確定します。
delayの数字は、表示するパーツの数によって調整をしてください。

JavaScriptではclassを順番に追加していく処理しかしてません。細かいアニメーションはCSSで追加してください。

CSSは以下の通りに追加。

style.css

/* enter */
# enter,
# enter div{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 10000;
}
body.runanime{
	position: fixed;
	overflow: hidden;
}
body{
	position: relative;
}
# enter div#enter-obj1{
	opacity: 1;
	background-color: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
# enter div#enter-obj1 p{
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 3em;
}
# enter div#enter-obj1 p span{
	display: inline-block;
	margin: 0 5px;
	opacity: 0;
}

# enter div#enter-obj1 p span.run,
.run{
	-webkit-animation: topFadeIn 2s linear 1;
	        animation: topFadeIn 2s linear 1;
}
# enter div.outrun{
	-webkit-animation: topBgOut 2s linear 1;
	        animation: topBgOut 2s linear 1;
}
# enter.end{
	display: none;
}
@-webkit-keyframes topFadeIn{
	 0%{	opacity: 0;}
	100%{	opacity: 1;}
}
@keyframes topFadeIn{
	 0%{	opacity: 0;}
	100%{	opacity: 1;}
}
@-webkit-keyframes topBgOut{
	 0%{	opacity: 1;}
	100%{	opacity: 0;}
}
@keyframes topBgOut{
	 0%{	opacity: 1;}
	100%{	opacity: 0;}
}

上記のアニメーションでは、文字を１文字ずつフェードインして、全部表示したらフェードアウトする形になっています。

アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。

サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。