ワイドアニメ　トップサイト表示のテストDEMOソース

トップデコレーションにアニメ導入

当サイトの構造は、シリウス新テンプレート2カラムで、サイトを開いた瞬間アニメ
表示..確認できましたか？

約4秒で消えて現コンテンツサイトが表示されるというスクリプトを採用した..
表現法です。

scriptを使っています...
SSLの障害はありませんが、AMPサイトへの対応はできません..

後々、詳細は加えますが現時点での出現法を解説します。

事前説明...以下の3800数値は表示されている時間です,,約4秒..
静止画像を使う場合は、1秒か2秒が望ましいと思います
setTimeout(function() {
$('.anime').fadeOut();
}, 3800);/*表示される時間　4秒*/
});

トップページのHTML..head内に以下ここから～記載をここまでを張り付けてください

<$ AllStrReplace(<h2>(.*?)</h2>,<h2><span>$1</span></h2>) $>
<$ AllStrReplace(<h3>(.*?)</h3>,<h3><span>$1</span></h3>) $>
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="<% publishCharset %>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<link rel="stylesheet" href="<% pageDepth %>css/textstyles.css" type="text/css" />
<% scriptUrl %>
<% pageStyles %>
<% headTag %>
<% rssFeedLink %>
<% googleSitemapTag %>
<% mobileLinkDiscovery %>

/*ここから*/
<script src="https://code.jquery.com/jquery-1.11.3.js" integrity="sha256-IGWuzKD7mwVnNY01LtXxq3L84Tm/RJtNCYBfXZw3Je0=" crossorigin="anonymous"></script>
<script>
$(function(){
$(".mainSite").css("display", "none");

setTimeout(function() {
$('.anime').fadeOut();
}, 3800);/*表示される時間　4秒*/
});

$(function(){
$(".mainSite").css({opacity:'0'});
setTimeout(function(){
$(".mainSite").css("display", "block");
$(".mainSite").stop().animate({opacity:'4'},1000);/*1秒かけてコンテンツを表示*/
},3800);/*約4秒後に*/
});
</script>

.anime {
width: 100%;
height: 100%;
max-height: 1080px;
background-color: #E9E3E3;
position: relative;
}

.anime img {
display: block;
position: absolute;
top: 28%;
left: 40%;
}

.mainSite {
width: 100%;
height: 100%;
max-height: 1080px;
background-color: #FC6;
position: relative;
}

.mainSite p {
font-size: 160%;
color: #FFF;
position: absolute;
top: 42%;
left: 40%;
}

</style>

/*ここまで*/
</head>

次、bodyの直下に記載追加

<body>

/*ここです..ここから*/
<div class="anime">
<img src="http://smile-design.bz/tight/blog/anai/bicycle-gif.gif"/>
</div>
/*ここまで*/

ここで終わり

アニメは、GIF画像をお使いください...もしくは自主製作でしょうか？
参照記事
https://www.affiliateno1.com/動くアニメーション画像｜ムービー？ソフト＆ジェネレイターまとめ/

不動画像を使用する際のこと...

アニメーションには興味が無い？..当然そのような理解もあるでしょうね
不動画像でも作用しますが、それでは表示秒数が4秒では長すぎる..
と感じさせてしまうでしょう...読者様を待たせてしまうことになりますね...

ですので表示秒数を一秒とかに短縮することを提案します。