모바일의 버튼이 계속 초점을 맞추거나 활성 상태를 유지하여 CSS 애니메이션에 문제를 일으킴

Question

버튼을 클릭할 때마다 애니메이션을 구현하려고 하는데 데스크톱에서는 잘 작동하지만 모바일에서는 동일한 효과를 얻을 수 없습니다. 먼저 버튼을 클릭한 다음 다른 곳을 클릭하여 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 .svgStroke 경로 {
  스트로크-다샤레이: 100;
  스트로크 대시 오프셋: -800;
  획 너비: 2;
  전환: 모두 1로 되어 있는 easy-in-out;
  스트로크: #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+.svgStroke 경로 {
  커서: 포인터;
  애니메이션: 대시 1.5초 큐빅-베지어(0.25, 0.46, 0.45, 0.94);
}

.prog_btn:호버 {
  글꼴 크기: 1.2rem;
}

.추가하다 {
  디스플레이: 인라인 블록;
  오른쪽 여백: 0.75rem;
  높이: 1.5rem;
  폭: 1.5rem;
}

  

     10% 추가
  
  

Answer 1

애니메이션이 끝날 때 초점을 취소(예: 흐림)할 수 있기를 바랐지만 작동하지 않았습니다.

약간 서투른 해결 방법은 다음과 같습니다. 이 스니펫은 애니메이션이 끝나면 애니메이션을 제거하고 다른 터치스타트 이벤트가 있을 때 애니메이션을 다시 활성화합니다. 클래스 대신 스타일 설정을 사용합니다.

으아악 으아악 으아악