ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。

以下はコードスニペットです。

.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レム。 }

 
  10% 追加 
  

ここには CodePen のリンクもあります。