トップページのkeyframes animationをブラウザの戻るボタン/サイト内リンクで無効化したい

Question

トップページのkeyframes animationをブラウザの戻るボタン/サイト内リンクで無効化したい

サイトトップページにロゴを数秒間表示しています。
他のページから戻ったときに何度も表示されるのを無効化したいです。
・ブラウザの戻るボタンで判断
・サイト内リンクで判断（ドメイン）
どちらかで行けると勝手に思っているのですが、scriptが分からないので教えていただきたいです。

該当のソースコード

.logo {
  width: 360px;
  height: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  background: url(images/logo.png) 0 0 no-repeat;
          animation: logoanimation 3s steps(10) .5s forwards;
}
@keyframes logoanimation {
    0% { background-position: 0    0  ; }
  100% { background-position: 0 -2880px; }
}

Answer 1

.logoは非表示にしておきます。
外部からのアクセスならjsで何かクラス（ここでは.showとします）を付加。
.showが付加されているときだけ現在のcssを適用すればご希望の動きになると思います。

.logo{
  display: none;
}

.logo.show {
  display: inline-block;
  width: 360px;
  height: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  background: url(images/logo.png) 0 0 no-repeat;
}

アクセス元の判定はこちらを参考に、alert部分を書き換えてみてください。
【引用元】https://www.nishishi.com/javascript-tips/doc-referrer.html#doc-referrer1

var ref = document.referrer;             // リファラ情報を得る
var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る
 
// ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)
var sStr = "^https?://" + hereHost;
var rExp = new RegExp( sStr, "i" );
 
// リファラ文字列を判別
if( ref.length == 0 ) {
    // リファラなしの場合
    alert("リファラ情報がありません");
}
else if( ref.match( rExp ) ) {
    // マッチした場合＝アクセス元が自サイト内の場合
    alert("自サイト内から来ました");
}
else {
    // マッチしない場合＝アクセス元がサイト外の場合
    alert("他のサイトから訪れました");
}