JQueryアニメーション終了後の再読み込みをやめたい

http://emn178.github.io/jquery-animations-spotlight/samples/spotlight/
に掲載されている、スポットライトをトップページに仕様していて無事設置が完了しました。
しかし、スポットライトを当てている画像にcssアニメーションでフェードインをしていて、その部分がスポットライトのアニメが終了後にリロードされているのか、また再度フェードインをしなおしてしまいます。
理想は、スポットライトのアニメが終了後、そのままキープされることで、画像が再度フェードインするのをやめたいです。

cssアニメーションをやめるみると、それでもスポットライトアニメーションが終わると、ガタッと再読み込みをしたようにズレが生じます。なのでcssアニメーションのせいではないのかなと思っております。
※サイトのアニメーションは一度スポットライトの動きが終わった後もガタッとなることもありません。

Jquery や JSの知識が全くないため、なぜか想像もつきません。
以下のURLからダウンロードをしています。

https://github.com/emn178/jquery-animations-spotlight/tree/master/samples/spotlight

html
1<div class="postheader">
2<div class="inner">
3<img src="img.svg" class="pfront">
4</div>
5</div>
6<script>
7$('.inner').animate('spotlight', {
8  "duration": 5500,
9  "delay": 0,
10  "repeat":0,
11  "count": 6,
12  "radius": 200,
13  "stopX": 0
14});
15</script>

css
1<style>
2img#postheaderfront {opacity: 0;}
3.pfront {animation: abc 8s 1s ease-out 1 alternate ; animation-fill-mode:forwards;}
4@keyframes abc{
5  from{opacity:0;transform: translateY(0); filter: brightness(50%) invert(1); }
6  5%{opacity:0;transform: translateY(0);filter: brightness(0) invert(1);}
7  to{opacity:1;transform: translateY(0);filter: brightness(0) invert(1);}
8}
9</style>

nekora

2021/01/31 06:26 編集

質問は編集・追記できます。 HTMLもCSSも一部抜粋では他の場所で不具合が出ている可能性を確認できません。 HTMLとCSS（実際のサイトに設置したもの）の全文を貼り付けてください。サンプルのソースコードやプラグインは提示されているURLから引っ張ってきてどのように動くか確認できましたが提示されているご自身のHTML&CSSでは、postheaderfrontというIDが付いたimgタグが存在しませんこれでは動作確認して、おかしなところを調査することができません。

design_er

2021/02/01 04:42

nekoraさんアドバイスいただいておりありがとうございます。あまりうまく抜粋できず、記事自体を削除しようと試みておりましたが、簡単に削除もできないようで、放置しており申し訳ございませんでした。

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

回答1件

ベストアンサー

プラグインとサンプルのURLと一部抜粋の少ない情報から、脳内補完して、ちゃんと動くコードを組みました。

まず、CSS AnimationとjQueryのanimate()は相性が悪いようでCSS Animationが2回実行されてしまいます。
なので、CSS Animationは止めて、jQueryのanimate()を複数同時に実行することで問題の解決としました。

キモになるのはanimate()にキューイングをfalseに設定することで、複数のanimateメソッドを同時に実行できるということです。

CSSのanimationにアニメーション名を複数カンマで区切って書いても複数アニメーションを同時実行可能ですが、spotlightのアニメーション名が分からなかったのでjQueryで統一しました。

以下がそのコードになります。面倒なのでHTML、CSS、JavaScriptを一つにまとめてあります。
詳細は、コードのコメントを見てください。

HTML
1<!DOCTYPE html> 
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7  <title>spotlight-test</title>
8  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
9  <!--jQueryには2つしかないeasingを32パターンにまで拡張するプラグインの読み込み-->
10  <!--詳細は  http://semooh.jp/jquery/cont/doc/easing/ を参照のこと-->
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
12  <!--spotlightプラグインの読み込み-->
13  <script src="jquery.animations.min.js"></script>
14  <script src="jquery.animations-spotlight.js"></script>
15</head>
16<body>
17    <style>
18        /* postheaderクラスの子要素なので.postheaderから始める。その子要素なので間に半角スペースを入れなければならない。*/
19        /* postheaderクラスの子要素のうちimgタグであるので半角スペースの後にタグ名imgを書く。*/
20        /* imgタグの中でもpfrontクラスが同時に指定されているもののみ対象とするので.pfrontをスペースを入れずに書く、この場合は同一要素内での指定になる*/
21        /* したがって正しいセレクタの書き方は .postheader img.pfront となる。*/
22        /* 参考：  http://weboook.blog22.fc2.com/blog-entry-268.html  */
23
24        .postheader img.pfront {opacity: 0;}
25        /*.pfront {animation: fadeIn 8s ease-out 1s 1 normal forwards;}*/
26
27        /*@keyframes fadeIn {*/
28            /*from{opacity:0;} transform: translateY(0); filter: brightness(50%) invert(1);}*/
29            /*5%{opacity:0;} transform: translateY(0); filter: brightness(0) invert(1);}*/
30            /*to{opacity:1;} transform: translateY(0); filter: brightness(0) invert(1);}*/
31        /*}*/
32    </style>
33    <div class="postheader">
34        <div id="inner"> <!-- innerはidで指定されている-->
35        <img class="pfront" src="img.svg">
36        </div>
37        </div>
38        <script>
39        //idで指定されているinnerはidであることを教えるために先頭に#をつける
40        //classで指定した場合は先頭に.をつける
41        //タグの時は直接タグ名を書けばいいが全ての同じタグに適用されるので使いどころが難しい
42
43        //spotlightのアニメーション設定＆実行
44        $('#inner').animate('spotlight', {
45          "duration": 5500,
46          "delay": 0,
47          "repeat":0,
48          "count": 6,
49          "radius": 200,
50          "stopX": 0,
51          "queue": false //キューイングをfalseに設定することで、複数のanimateメソッドを同時に実行できる
52        });
53
54        //keyframeの設定と構築
55        var keyframes = {};
56        keyframes['0%'] = { transform: 'translateY(0) ',  filter: 'brightness(50%) invert(1)' };
57        keyframes['5%'] = { transform: 'translateY(0) ',  filter: 'brightness(0) invert(1)' };
58        keyframes['100%'] = { transform: 'translateY(0) ',  filter: 'brightness(0) invert(1)' };
59
60        //背景の絵のアニメーション設定＆実行
61        $(".pfront").animate({opacity:1} , {
62            "duration": 8000, 
63            "easing": "easeInOutQuad", 
64            "delay": 1000, 
65            "count": 1, 
66            "direction": "normal", 
67            "fillMode": "forwards", 
68            "queue": false, //キューイングをfalseに設定することで、複数のanimateメソッドを同時に実行できる
69            "keyframes": keyframes
70        });
71        </script>    
72</body>
73</html>