처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS에서 @keyframes와 animation 속성을 사용할 때, animation-fill-mode: forwards의 의미는?

어려움 MDN Web Docs
보기 및 정답
A 애니메이션 종료 후 마지막 키프레임의 스타일을 유지한다
B @keyframes에서 0%를 생략하면 실행되지 않는다
C 애니메이션 시작 전 첫 키프레임 스타일을 적용한다
D transition은 처음 렌더링 시에도 자동 적용된다

해설

animation-fill-mode: forwards는 애니메이션이 끝난 후에도 마지막 @keyframes의 스타일 상태를 그대로 유지합니다. 기본값(none)에서는 애니메이션 종료 시 원래 스타일로 되돌아갑니다. backwards는 시작 전에 첫 키프레임을 적용합니다.

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

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

정규반 살펴보기