ホームページの上部にCSS3アニメーションがあり、ページが読み込まれるとすぐに開始されます。問題は、ユーザーが新しいタブでそのページを開いても、そのページを表示していなくてもすぐにアニメーションが再生されるということです。ユーザービューページの後にCSS3遷移を開始しますか？
ユーザーがそのページを閲覧した後にのみアニメーションを開始する方法はありますか？
他の非表示のタブでYouTube動画を開くと、そのタブを開くまで自動的に再生されません。特にhttps://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API
、あなたがたいと思う：あなたは新しいタブでペンを開くと、あなたは、視認性のAPIを使用したいと思うタブ
ことを確認するまでもCodePenそれは同じ起動文句を言わないんdocument.hiddenプロパティとvisibilitychangeイベントです。これらを使用して、document.hiddenプロパティがfalseのときにクラスを動的に変更することができます。
mentioned thereとすると、ウィンドウがフォーカスされているとき、つまりのユーザーがをクリックしたことを確認できます（ただし、表示されません）。あなたはそれをどのように実装しますか？
ID /クラス/タグを選択します。スタイルも、アニメーションも付いています。そのウィンドウがフォーカスされると、要素にid/classを適用するか、タグ/ id/classを使用して新しい要素を作成します。クラスが追加された後、onfocus関数を無効にするか、またはこの目的のために作成された変数を介してチェックします。
例：
window.onfocus=function(){
window.onfocus=null;
document.getElementById("toBeAnimated").className="animatable";
}#toBeAnimated{
font-size:25px;
}
.animatable{
transition: background-color 250ms linear;
background-color:black;
transition: color 250ms linear;
color:white;
}<div id="toBeAnimated">Focus on the snippet to animate me!</div>別のオプション：ユーザーがページをスクロールし始めたときにもonscrollイベント、すなわちに関数を適用することができます。