CSS 초보 필독! 애니메이션 속성 마스터, 트랜지션과 비교 분석 (6.7절)
CSS 애니메이션 속성 완전 정복! 🚀
이번 시간에는 CSS3에서 새롭게 추가된 애니메이션 속성에 대해 배워볼 거야. 이전 영상에서 배웠던 transition 속성보다 훨씬 더 정교하고 부드럽게 애니메이션 효과를 제어할 수 있어서 정말 유용하거든!
1. 애니메이션의 기본: @keyframes 🎬
애니메이션을 만들려면 먼저 @keyframes라는 규칙을 정의해야 해. 이건 마치 애니메이션의 시나리오 같은 거야.
@keyframes 애니메이션이름 {
/* 애니메이션 시작 지점 */
0% {
/* 여기에 CSS 스타일 작성 */
}
/* 애니메이션 중간 지점 (선택 사항) */
50% {
/* 여기에 CSS 스타일 작성 */
}
/* 애니메이션 종료 지점 */
100% {
/* 여기에 CSS 스타일 작성 */
}
}
애니메이션이름: 이@keyframes규칙을 식별할 고유한 이름이야. 다른@keyframes와 겹치면 안 돼!0%: 애니메이션의 시작 지점을 나타내.from이라고 써도 똑같아.100%: 애니메이션의 종료 지점을 나타내.to라고 써도 똑같아.50%(중간 지점): 애니메이션 중간에 다른 스타일을 적용하고 싶을 때 원하는 만큼 추가할 수 있어. 0%와 100% 사이에는 콤마(,)를 찍지 않는다는 점 꼭 기억해!
예시: 배경색을 파란색에서 주황색으로 바꾸는 애니메이션
@keyframes bgChange {
0% {
background-color: blue;
}
100% {
background-color: orange;
}
}
2. 애니메이션 적용하기: animation 속성들 🎨
@keyframes를 정의했다면, 이제 HTML 요소에 애니메이션을 적용해야겠지? 이때 여러 가지 animation 관련 속성을 사용해.
animation-name: 적용할@keyframes의 이름을 지정해.
css animation-name: bgChange;animation-duration: 애니메이션이 실행되는 데 걸리는 시간을 초(s) 또는 밀리초(ms) 단위로 지정해.
css animation-duration: 2s; /* 2초 동안 실행 */
이 두 가지 속성만 있으면 최소한의 애니메이션 효과를 만들 수 있어!
예시: 위에서 만든 bgChange 애니메이션을 2초 동안 실행
.my-element {
animation-name: bgChange;
animation-duration: 2s;
}
3. 애니메이션 더 정교하게 제어하기 ⚙️
애니메이션을 더 멋지게 만들고 싶다면, 다음과 같은 속성들을 활용해봐!
animation-delay: 애니메이션이 시작되기 전에 얼마나 기다릴지 시간을 지정해.
css animation-delay: 1s; /* 1초 뒤에 애니메이션 시작 */-
animation-fill-mode: 애니메이션이 끝나고 나서 어떤 상태를 유지할지 결정해.none(기본값): 애니메이션이 끝나면 원래 상태로 돌아가.forwards: 애니메이션이 끝난 마지막 상태를 유지해.backwards: 애니메이션이 시작되기 전,animation-delay동안 첫 번째@keyframes의 스타일을 적용해.both:forwards와backwards를 합친 효과야.
팁: 실무에서는
forwards를 가장 많이 사용해. 애니메이션이 끝난 후에도 그 상태를 유지하고 싶을 때 유용하거든! -
animation-iteration-count: 애니메이션이 몇 번 반복될지 횟수를 지정해.
css animation-iteration-count: 3; /* 3번 반복 */ animation-iteration-count: infinite; /* 무한 반복 */ -
animation-play-state: 애니메이션을 실행하거나 일시 정지할 수 있어.running(기본값): 애니메이션 실행.paused: 애니메이션 일시 정지.
예시: 마우스를 올리면 애니메이션이 멈추게 하기
css .my-element:hover { animation-play-state: paused; }
*animation-direction: 애니메이션이 진행되는 방향을 설정해.
*normal(기본값): 순방향 (0% -> 100%)
*reverse: 역방향 (100% -> 0%)
*alternate: 홀수 번째는 순방향, 짝수 번째는 역방향으로 번갈아 실행.
*alternate-reverse: 홀수 번째는 역방향, 짝수 번째는 순방향으로 번갈아 실행.
4. 모든 것을 한 번에! animation 단축 속성 ✨
지금까지 배운 여러 animation 속성들을 animation이라는 하나의 속성으로 묶어서 사용할 수 있어! 순서는 중요하지만, 외우기 어렵다면 MDN 문서 등을 참고해서 사용하면 돼.
.my-element {
animation: bgChange 2s 1s infinite alternate forwards;
/* name | duration | delay | iteration-count | direction | fill-mode */
}
이처럼 CSS 애니메이션 속성을 잘 활용하면 웹사이트를 훨씬 더 동적이고 매력적으로 만들 수 있을 거야! 😊