• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 animation

@keyframes 란?

CSS의 @keyframes는 애니메이션을 정의하는 데 사용되는 규칙입니다.

이 규칙을 사용하면 HTML 요소가 시간이 지남에 따라 어떻게 변할지를 단계별로 지정할 수 있습니다. 웹 페이지에서 요소들이 단순히 위치를 바꾸거나 색상을 변경하는 대신 부드럽게 움직이고 변환되는 애니메이션을 만들 수 있습니다.

@keyframes 의 기본 개념

@keyframes는 애니메이션의 각 단계를 정의하는 역할을 합니다. 이를 통해 애니메이션의 시작 상태부터 끝 상태까지 요소의 스타일이 어떻게 변할지를 지정할 수 있습니다.

@keyframes 애니메이션_이름 {
	from {
		/* 애니메이션 시작 시의 스타일 */
	}
	
	to {
		/* 애니메이션 종료 시의 스타일 */
	}
}

• from: 애니메이션의 시작 시점입니다. 이 부분에 초기 상태의 스타일을 정의합니다.
• to: 애니메이션의 끝 시점입니다. 이 부분에 최종 상태의 스타일을 정의합니다.

@keyframes 에 여러 단계 추가하기

단순한 시작과 끝 외에도, 애니메이션에 여러 단계를 추가하여 좀 더 복잡한 애니메이션을 만들 수 있습니다. 이 경우 퍼센트(%)를 사용하여 애니메이션의 특정 지점에서의 스타일을 정의할 수 있습니다.

@keyframes 이동및색변경 {
	0% {
		background-color: red;
		transform: translateX(0);
	}
	50% {
		background-color: yellow;
		transform: translateX(100px);
	}
	100% {
		background-color: green;
		transform: translateX(200px);
	}
}

• 0%: 애니메이션의 시작점(0%)입니다. 박스의 배경색은 빨간색이고, 원래 위치에 있습니다.
• 50%: 애니메이션이 절반(50%)에 도달했을 때, 박스는 노란색으로 변하고 100px 오른쪽으로 이동합니다.
• 100%: 애니메이션이 끝날 때(100%), 박스는 초록색으로 변하고 200px 오른쪽으로 이동합니다.

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