인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

빈공간님의 프로필 이미지
빈공간

작성한 질문수

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

3-2 CSS 애니메이션과 키프레임에 대한 이해

선생님 transform과 제이쿼리 혹은 자바가 연관성이 많나요??

작성

·

196

0

css에 그냥 애니메이션 플레이 스테이트

animation 축약형

animation: animation-name animation-duration animation-delay animation-iteration-count animation-timing-function animation-direction fill-mode play-state;

* 이름 > 실행속도 > 지연시간 > 반복횟수 > 애니메이션 속도 조절/그래프 >  반복방향설정 > 끝난후위치 > 실행or정지

.ggang_model { animation 축약형 }

이렇게만 써도 작동할것같은데 혹시 active를 넣고 제이쿼리를 써주시는 이유가 있으실까요?

답변 1

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 :)

해당 부분은 animation-play-state: paused; 걸어두고 active 클래스가 추가 될 때

animation-play-state 의 값을 running으로 변경해 애니메이션 플레이 되도록 하는 부분입니다 :)

그럼 또 다른 궁금증이 생기면 문의주세요 :)

빈공간님의 프로필 이미지
빈공간

작성한 질문수

질문하기