• 섹션 7 세부 강의 목차 💬

<aside> <img src="/icons/cursor-click_purple.svg" alt="/icons/cursor-click_purple.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

@keyframes란?

animation 관련 속성들

animation 실습

🌿 animation 이란?

어렸을 적 tv로 ‘검정 고무신’ 같은 만화를 보신 적 있으신가요? 보신적이 있으시다면, 아마도 애니메이션이라는 단어에 익숙하실 것 입니다. 애니메이션이란, 연속되는 이미지를 연결해서 자연스럽게 움직이는 것 처럼 보이게 만드는 기법을 통칭합니다.

사실, 여러분은 이미 CSS를 이용해 간단한 애니메이션을 만들었던 경험이 있습니다. 바로 transition을 이용해서 만든 요소들인데요, 우리는 transition을 이용해 변화 전, 후 관계를 부드럽게 이어주는 애니메이션 을 만들었습니다.

CSS를 이용해서 애니메이션을 만드는 두 가지 방법

1. transition 속성 활용

transition은 특정 이벤트를 기점(hover 등)으로 작동합니다. 지난 시간에 알아보았던 방법이며, 혹시 기억이 안난다면 지난 시간 강의를 복습하고 오시길 바랍니다.

2. animation 속성과 keyframe 활용

시작하기 위한 이벤트가 필요 없습니다. 그리고 애니메이션의 시작, 정지, 반복까지 제어가 가능합니다.

🌿 @keyframes란?

CSS 애니메이션 의 시작, 중간, 끝 등의 중간 상태를 정의 합니다. keyframe 작성 방법은 아래와 같습니다.

/* keyframe 작성 방법 */
@keyframes 애니메이션이름 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}

from 과 to 대신 진행도(%) 표기도 가능합니다.

/* keyframe 작성 방법 */
@keyframes 애니메이션이름{
	0% {
		left : 0;
	}
	50%{
		left : 200px;
	}
	100%{
		top : 200px;
		left :  200px;
	}
}

이런 keyframe을 어떻게 요소에 적용하느냐, 바로 애니메이션 속성을 이용하면 됩니다! 그럼 animation 관련 속성들을 하나씩 알아보도록 하겠습니다.