モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する

Question

<p>ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。 </p> <p>以下はコードスニペットです。 </p> <p> <pre class="brush:css;toolbar:false;">.btn_container { 色: #35f8ff; 位置: 相対的; 表示: インラインブロック; テキスト整列: 中央; マージン: 2.5rem 自動; } .prog_btn { テキスト変換: 大文字; フォントサイズ: 1.3rem; パディング: 10px 25px; z インデックス: 3; 背景色: 透明; カーソル: ポインタ; トランジション: 0.2 秒のイーズアウト。 位置: 相対的; マージン: 自動; } .btn_container .svgStroke { 位置: 絶対; z インデックス: 1; 幅: 100%; トップ: -25%; 左: 0; } .btn_container .svgストロークパス { ストローク-ダシャ配列: 100; ストロークダッシュオフセット: -800; ストローク幅: 2; 遷移: すべて 1 のイーズインアウト。 ストローク: #35f8ff; } @keyframes ダッシュ { 0% { ストローク-ダシャ配列: 100; ストローク幅: 2; } 50% { ストローク幅: 4; ストローク: #35f8ff; フィルター: ドロップシャドウ(0px 0px 3px #e8615a) ドロップシャドウ(0px 0px 20px #35f8ff) ドロップシャドウ(0px 0px 150px #35f8ff); } 100% { ストローク-ダッシュオフセット: 800; ストローク幅: 2; } } .prog_btn:hover .svgストロークパス { カーソル: ポインタ; アニメーション: ダッシュ 1.5 秒の cubic-bezier(0.25, 0.46, 0.45, 0.94); } .prog_btn:ホバー { フォントサイズ: 1.2rem; } 。追加 { 表示: インラインブロック; 右マージン: 0.75rem; 高さ: 1.5レム; 幅: 1.5レム。 }</pre> <pre class="brush:html;toolbar:false;"><div class="btn_container"> <div class="prog_btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ストローク幅="1.5" ストローク="currentColor" class="add" > <パス ストロークラインキャップ = "丸" ストロークライン結合 = "ラウンド" d="M12 4.5v15m7.5-7.5h-15" > </svg> 10% 追加 </div> <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg"> <パス d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z" ストローク = "白" ストローク幅="2" > </svg> </div></pre> </p> <p>ここには CodePen のリンクもあります。 </p>

Answer 1

アニメーションの最後にフォーカス (つまり、ぼかし) をキャンセルできることを期待していましたが、これは機能しませんでした。

これは少し不格好な回避策です。このスニペットは、アニメーションが終了するとアニメーションを削除し、別のタッチスタート イベントが発生すると再びアニメーション化します。クラスの代わりにスタイル設定を使用します。

リーリー リーリー リーリー