처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
더보기
인사이트 FAQ 유튜브 카페

로그인

| 비밀번호찾기

추가 정보 입력

서비스 이용을 위해 휴대전화 번호를 입력해주세요.

회원가입

무료 회원가입 가입비 없이 무료로 가입할 수 있습니다

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

CSS transition과 animation 속성의 차이점으로 올바른 것은?

보통 MDN Web Docs
보기 및 정답
A transition은 상태 변화(hover 등) 시 한 번 실행되고, animation은 @keyframes로 정의하여 반복 및 복잡한 제어가 가능하다
B animation 속성은 hover 같은 상태 변화 없이도 자동으로 실행할 수 있지만 transition과 달리 GPU 가속 성능 최적화가 전혀 이루어지지 않는다
C animation-fill-mode: forwards를 설정하면 애니메이션 종료 후가 아닌 시작 전의 초기 상태를 유지하게 되는 것이다
D CSS transition은 시작 상태와 끝 상태 사이에 keyframe을 추가하여 여러 중간 단계를 세밀하게 제어하는 것이 가능하다

해설

transition은 요소의 속성이 변할 때(예: hover) 시작과 끝 상태 사이를 부드럽게 전환합니다. animation은 @keyframes로 중간 단계를 정의하고, 반복(iteration-count), 방향 전환(direction), 지연(delay) 등 복잡한 애니메이션을 제어할 수 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

관련 문제

CSS gap 속성의 용도는 무엇인가요?
CSS
CSS column-count와 column-gap 속성으로 만들 수 있는 레이아웃은?
CSS
CSS aspect-ratio 속성의 역할은?
CSS
CSS @property 규칙의 핵심 기능으로 올바른 것은?
CSS
CSS :autofill 의사 클래스는 언제 적용되나요?
CSS