inflearn logo
강의

Course

Instructor

SVG Master

Mask 2 - Creating a Magnifying Glass Effect Using JavaScript

마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상

238

Gusi Yo

1 asked

1

안녕하세요.
 
강의를 잘 보던 중 [마스크 2] 강의에서 질문이 있어 글을 씁니다!
 
배경 패턴에 윙크하는 애니메이션을 적용하였는데, 해당 애니메이션이 마우스가 움직일때만 동작합니다.
 
즉, 마우스가 멈춰있으면 애니메이션도 정지되고 마우스를 움직이면 다시 애니메이션이 진행됩니다. 그리고 약간 끊기는 것처럼 보이기도 합니다.
 
제가 강의를 보며 따라 만든 파일과 올려주신 html 파일 모두 동일한 현상이 발생합니다.
 
정상적인 동작인것인지 궁금합니다. 아니라면, 마우스가 멈춰있어도 배경의 애니메이션이 계속 진행되도록 처리하려면 어떻게 할 수 있을까요?
 
감사합니다.
 

svg HTML/CSS

Answer 1

0

studiomeal

앗.. 그냥 자동으로 재생되는 CSS 애니메이션이라, 마우스와 관계없이 움직이는게 정상 동작입니다~
브라우저에 따라 차이가 있는건지 모르겠는데.. 현재 사용하시는 브라우저가 어떤걸까요?
다른 브라우저에서 한번 확인해보시는 것도 좋을 것 같습니다.

0

Gusi Yo

질문 드렸던 현상은 크롬에서 발생했습니다.

혹시나 해서 크롬을 최신 버전으로 업데이트 했는데도 동일합니다.

그런데, 웨일 브라우저를 사용해보니 정상적으로 동작합니다..!

 

답변 감사합니다.

svg 직접 그리기

0

59

1

SVG 파일 CSS 애니메이션

0

215

1

곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?

0

285

1

선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?

0

585

1

atom 서비스 종료, emmet 설치안됨

0

1426

1

SVG 태그 중 foreignObject 관련하여 질문드립니다.

0

1565

1

마스크가 안돼요..

0

431

2

강의 노션

0

404

1

강의 노션

0

342

1

path 를 x ,y로 이동

0

287

1

같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?

0

363

1

마스크2 돋보기 질문

0

391

1

압축에 관하여

0

281

1

svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요

0

418

2

패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ

0

514

1

글씨 깨짐

0

434

1

smil 무한반복 질문

0

236

1

SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)

0

335

1

class name 정의 하실때 bem 방법 사용하시나요??

0

332

1

마스크 2 에서 질문있습니다.

0

265

1

path로 그린 svg 화면 꽉채우기

0

883

1

svg 파일 불러오기

0

369

1

svg 태그 질문!

0

235

1

질문드립니다.

0

250

1