可視領域に入ったら発火するパラパラ漫画のようなアニメーションを実装したい

### 実現したいこと
こちらのページで紹介されている方法を用いて、6コマ程度のパラパラ漫画のようなアニメーションを実装したいです。

挙動の希望としては、１コマ目で静止している状態から、
可視領域に入った1秒後に２コマ目→３コマ目→４コマ目→５コマ目→6コマ目と切り替わり、6コマ目で静止するイメージです。

発生している問題・分からないこと

自分なりに色々と模索しましたが、初心者のためうまく動かず困っております。
そもそも違いアニメーションの書き方の方が良いのでしょうか？
どなたかご教授いただけますと幸いです。

該当のソースコード

<style>
/* スペースのためのCSS */
.space {
	width: 100%;
	height: 100vh;
	background: #eee;
}
/* 以下アニメーション周り */
.sprite {
    width: 126px;
    height: 100px;
    margin: 100px auto;
    background: url(https://liginc.co.jp/wp-content/uploads/2014/12/sprite.png) no-repeat 0 0;
}

.css .sprite {
    -webkit-animation: play 1s steps(6) infinite;
    animation: play 1s steps(6) infinite;
}

@-webkit-keyframes play {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -756px 0;
    }
}

@keyframes play {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -756px 0;
    }
}
/* 以下発火周り */
.anime {
	
	
}
.anime.ac {
	
}
	</style>

<body>
	<section class="section css">
		<div class="space"></div>
		<div class="sprite anime"></div>
	</section>
	
	
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
<script>
$(function(){
    function inview(className,root_margin,callback){
        var nodelist = document.querySelectorAll(className);
        var node = Array.prototype.slice.call(nodelist, 0).reverse();
        var options = {
            root: null,
            rootMargin: root_margin,
            threshold: 0
        }
        var observer = new IntersectionObserver(callback, options);
        node.forEach(function(obj){
            observer.observe(obj);
        })
    }
	inview('.anime','-10% 0px',function(entries, observer){
        entries.forEach(function(entry){
            if(entry.isIntersecting){
                $(entry.target).addClass("ac");
            }
        });
    });
});
</script>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

発火の制御は以下の箇所に記述するのかと思うのですが、勉強不足のため上手くできません。

.anime {
	
	
}
.anime.ac {
	
}

補足

・パラパラ漫画のような表現ができれば、こちらのページで紹介されている方法でなくても問題ありません。
・可視領域に入った際、1秒後くらいに一度だけ実行させたいです。
・設置する箇所は、ページのフッター部分を想定しております。

yambejp

2025/08/22 06:37

可視領域にはいった瞬間だと結局あまり見えてない状況でアニメが動き出しますが大丈夫ですか？あとアニメの仕様をもう少し詳しくしていただけるより希望に近づけられるかと

gohantabetai

2025/08/22 06:56

yambejp様コメントありがとうございます。＞＞可視領域にはいった瞬間だと結局あまり見えてない状況でアニメが動き出しますが大丈夫ですか？ →ご指摘ありがとうございます。仰る通りですね… フッターに来る要素なので、１コマ目もある程度見えた状態から発火させたいです。そうなると「ページの最下部がウインドウの下に来た際」のような指示になるのでしょうか？（初心者のため的外れでしたら申し訳ありません）また、具体的なアニメーションのイメージを追加いたしました。何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

参考までにjavascriptのIntersectionObserverを利用したサンプルを

html
1<script>
2const imgs=[
3"https://placehold.jp/ff0000/00000/100x100.png?text=1",
4"https://placehold.jp/00ff00/00000/100x100.png?text=2",
5"https://placehold.jp/0000ff/00000/100x100.png?text=3",
6"https://placehold.jp/ffff00/00000/100x100.png?text=4",
7"https://placehold.jp/00ffff/00000/100x100.png?text=5",
8"https://placehold.jp/ff00ff/00000/100x100.png?text=6",
9  ];
10let count=0; //グローバルなカウンタ
11let flag=true; //進行管理フラグ
12const viewRatio=0.3; //どのくらい見えたら始めるか
13const duration=500; // アニメスピード
14const io=()=>{
15  if(flag){
16    const observer = new IntersectionObserver(changes=>{
17      for (let change of changes) {
18        if(change.intersectionRatio > viewRatio){
19          flag=false;
20          const timerId=setInterval(()=>{
21            if(count>=imgs.length){
22              clearInterval(timerId);
23              return;
24            }
25            targetimg.src=imgs[count];
26            count++;
27          },duration);
28        }
29      }
30    });
31    observer.observe(targetimg);
32  }
33}
34window.addEventListener('DOMContentLoaded', ()=>{
35  targetimg.src=imgs[0];
36  io();
37});
38window.addEventListener('wheel',io);
39window.addEventListener('scroll',io);
40
41</script>
42<style>
43.dummy{
44height:40%;
45  background-Color:gray;
46}
47.dummy:nth-child(2n){
48  background-Color:lightgray;
49}
50</style>
51<div class="dummy"></div>
52<div class="dummy"></div>
53<div class="dummy"></div>
54<img id="targetimg" src="#">
55<div class="dummy"></div>
56<div class="dummy"></div>
57<div class="dummy"></div>

投稿2025/08/22 07:30

yambejp

総合スコア118073

gohantabetai

2025/08/22 11:11

確認が遅くなりまして申し訳ございません、こちらのパターンのサンプルまで本当にありがとうございます。大変勉強になります。こちらのパターンでの実装も試した上で使い分けていきたい思います。この度は本当にありがとうございました！

行動規範の内容に同意します

ベストアンサー

.css .sprite {...} のルールセットを削除
.anime.ac {...} のルールセットに animation: play 1s steps(6) 1s forwards; を追加

で意図どおりになるでしょうか。

質問内容にはあまり関係ありませんが、-webkit-animation や @-webkit-keyframes は今はまったく必要ありません。animation @keyframes だけでいいです。

投稿2025/08/22 06:57

編集2025/08/22 07:31

int32_t

総合スコア21985

gohantabetai

2025/08/22 07:10

int32_t様ありがとうございます！いただいた内容にて無事解決できました。 -webkit-animation や @-webkit-keyframes件も承知いたしました。大変勉強になりました！精進いたします。

gohantabetai

2025/08/22 07:22

int32_t様度々申し訳ございません。当方の確認不足でして、最後の画像６コマ目での静止でなく、一番最初の１コマ目に戻って静止してしまうのですが、こちらは解決方法等ございますでしょうか？重ね重ね申し訳ございません。

int32_t

2025/08/22 07:30

animation プロパティの値に forwards を追加してください。 https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

gohantabetai

2025/08/22 07:41

ご回答ありがとうございます。以下で記述いたしましたが、今度は最後何も表示されなくなってしまいました... .anime.ac { animation: play 1s steps(6) 5s forwards; } 記述が誤っておりましたら申し訳ございません。

int32_t

2025/08/22 07:50

おっとすみません、動作確認してません。 keyframeが非表示の状態で終わっていることが原因なので、 * keyframe の 100% のところを「background-position: -630px 0;」(画像の横幅の-5/6)に * animation プロパティの値を「play 1s steps(5) 1s forwards」にですかね。

gohantabetai

2025/08/22 08:29

こちらこそ、何度もすみません... ご教授いただいた内容にて、問題なく理想通りの挙動になりました！この度は本当にありがとうございました！大変助かりました。

行動規範の内容に同意します

あなたの回答