CSS 애니메이션 학습법
Scrimba Articles
편집자 요약
CSS 애니메이션은 크게 transition과 keyframe animation 두 가지로 나뉩니다. transition은 hover나 class 변경처럼 상태가 바뀔 때 두 상태 사이를 움직이며, keyframe animation은 @keyframes로 정의한 여러 단계의 흐름을 독립적으로 실행합니다. 학습 순서는 transition, keyframes, transforms, 성능 규칙, 접근성의 순서가 권장됩니다. 또한 200ms는 빠르게 느껴지고 600ms는 느리게 느껴질 수 있으며, 속도와 절제가 중요하다고 설명합니다.
인사이트
애니메이션의 문법보다 언제 transition을 쓰고 언제 @keyframes를 쓰는지 구분하는 것이 중요합니다. 먼저 간단한 hover 효과에 transition을 적용해 보고, 이어서 @keyframes로 반복 동작을 만들어 보는 연습이 좋습니다.
함께 배우면 좋은 강의
이 소식과 이어지는 코드프렌즈 강의입니다. 설치 없이 브라우저에서 바로 실습할 수 있어요.
댓글
댓글을 불러오는 중…