CSSアニメーション無限ループ表示のズレを直す方法について

実現したいこと

お世話になります。
背景動画の上に画像（h1）を載せて動画の最初と最後だけに画像が表示できるようにしたいです。

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

無限ループで表示回数を重ねるごとに画像の表示タイミングがズレていきます。

このズレを解消するにはどのような調整をすれば良いでしょうか？
よろしくお願いいたします。

該当のソースコード

HTML
1<div class="mvvideo">
2              <video src="<?php echo get_template_directory_uri() ?>/assets/img/top/slideshow.mp4" loop autoplay muted></video>
3</div>
4<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri() ?>/assets/img/top/logo.png" alt="画像"></a></h1>

CSS
1/* h1画像アニメーション表示 */
2h1 {
3   opacity: 0;
4   animation: fadeIn 22s infinite;/* 22秒で1サイクル */
5}
6@keyframes fadeIn {
7  10%, 90% { opacity: 0; }/* 画像の非表示タイミング */
8	0%, 100% { opacity: 1; }/* 画像の表示タイミング */
9}

試したこと・調べたこと

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

上記の詳細・結果

ネットで「CSSアニメーション　無限ループ　ズレる」「CSSアニメーション　カスタマイズ」など検索して試してみましたが、今回の実現したい内容は分かりませんでした。

補足

特になし

jQuery
1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<script>
3$(function(){
4  // h1要素をループ処理
5  $('h1').each(function() {
6  $('h1').fadeIn(3000);
7  $('h1').fadeOut(3000);
8$( '#video' ).on( 'timeupdate', function ( event ) {
9	if ( $(this)[0].currentTime >= 20 ) {
10		// 20秒以上経過した際の処理
11		// 動画の長さは$(this)[0].duration
12  $('h1').fadeIn(3000);
13  }
14	});
15});
16});
17</script>

juner

2025/02/06 02:39 編集

css は動画の再生位置については把握していないのでアニメーションが終了してから再度動かすみたいなことをしないといけないのではないでしょうか？（要js

yambejp

2025/02/06 02:54

動画とCSSアニメは完全な同期は厳しいと思います

osarusam

2025/02/06 09:37

コメントありがとうございます。 JSが不得意で良く分からないので、CSSアニメーションだけで作れないかと思ったのですが、やはり難しいのですね。参考になりました。

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

回答1件

ベストアンサー

動画の進捗とCSSアニメーションを完全に同期させる手段はありません。

CSSアニメーションは諦めて、timeupdateイベントを使って動画の経過時間に従ってJavaScriptでスタイルを変更するのがよいでしょう。

追記: timeupdate を使った具体的なコードです。

js
1const h1 = document.querySelector('h1');
2document.querySelector('.mvvideo video').addEventListener('timeupdate', e => {
3  const percent = 100 * e.target.currentTime / e.target.duration;
4  if (percent <= 10) {
5    h1.style.opacity = 1 - percent / 10;
6  } else if (percent >= 90) {
7    h1.style.opacity = (percent - 90) / 10;
8  } else {
9    h1.style.opacity = 0;
10  }
11});

実際に動かしてみるとイベントがあまり頻繁に発生しないみたいで、アニメーション用途には向かない感じでした。requestAnimationFrame() の方がよさそうです。

js
1function handleFrame() {
2  requestAnimationFrame(handleFrame);
3  const h1 = document.querySelector('h1');
4  const video = document.querySelector('.mvvideo video');
5  const percent = 100 * video.currentTime / video.duration;
6  if (percent <= 10) {
7    h1.style.opacity = 1 - percent / 10;
8  } else if (percent >= 90) {
9    h1.style.opacity = (percent - 90) / 10;
10  } else {
11    h1.style.opacity = 0;
12  }
13}
14requestAnimationFrame(handleFrame);