クリックを誘うアニメーションを作ったのでメモしておきます。
１．2枚のSVG画像をアップロード
SVG画像素材も私が作ったものなので、必要がありましたらダウンロードしてお使いください。
（再配布や直リンクは禁止です）
※WordPressの場合は、初期設定だとSVGが使えないので、safeSVGなどのプラグインを入れて、SVG画像を使えるようにしておいてください。
画像１（click-01.svg）
画像２（click-02.svg）
２．HTMLに以下を追加
クリックアニメーションを表示させたい場所に以下のコードを追加。
<span class="finger-anime" aria-hidden="true"></span>３．以下のCSSを追加
画像のパスは、実際にアップロードしたURLに修正してください。
.finger-anime {
--w: 50px;/*任意のサイズに編集*/
--h: 55px;/*任意のサイズに編集*/
--move-x: -8px;
--move-y: 8px;
--point-x: 0px;
--point-y: 0px;
--dur: 2s;/*アニメーションの長さ*/
position: relative;
display: inline-block;
width: var(--w);
height: var(--h);
pointer-events: none;
top: 0px;/*任意の位置に編集*/
right: 0px;/*任意の位置に編集*/
z-index: 1000;
}
.finger-anime::before,
.finger-anime::after{
content: "";
position: absolute;
inset: 0;
transform: translate(0, 0);
will-change: transform;
opacity: 0;
}
.finger-anime::before{
background: url("/click-01.svg") no-repeat center / contain;
/*画像ファイルのパスをアップロード先に修正*/
transform-origin: 50% 50%;
animation: finger-move var(--dur) ease-in-out infinite;
}
.finger-anime::after{
background: url("/click-02.svg") no-repeat center / contain;
/*画像ファイルのパスをアップロード先に修正*/
transform: translate(var(--point-x), var(--point-y));
animation: point-pulse var(--dur) ease-in-out infinite;
}
@keyframes finger-move{
0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0;}
35% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(var(--move-x), var(--move-y)) scale(0.94) rotate(-2deg); opacity: 1;}
62% { transform: translate(var(--move-x), var(--move-y)) scale(0.97) rotate(-1deg); }
100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0; }
}
@keyframes point-pulse{
0% { opacity: 0; }
38% { opacity: 0; }
50% { opacity: 1; }
62% { opacity: 0; }
100% { opacity: 0; }
}４．完成！
こんな感じに表示されます↓