transition 속성과 함께 애니메이션 효과를 표현할 수 있는 다른 방법으로는 animation 관련 속성을 들 수 있습니다. transition과 animation 속성이 애니메이션 구현이 가능하다는 유사성이 있지만, animation 관련 속성의 경우에는 Keyframes at-rule을 사용하여 특정 시점에 키프레임을 지정할 수 있다는 점이 다릅니다.

또한 애니메이션의 재생 횟수, 진행 방향, 일시 정지 기능 등과 같은 풍부한 기능을 제공하고 있기 때문에 좀 더 세밀한 제어가 가능합니다.

📌 @keyframes

@keyframes는 animation 속성에 적용할 키프레임을 생성하기 위한 규칙입니다. 키프레임이란, 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현됩니다.

/* @keyframes 형식 */
@keyframes 애니메이션 이름 {
 from {
	 css속성: 값;
 }
 [percentage]{
	 css속성: 값;
 }
 to {
	 css속성: 겂;
 }
}

애니메이션 이름은 @keyframes 규칙으로 생성된 애니메이션 정보를 대표하는 이름으로, 사용자가 정의하여 선언합니다. 이때 @keyframes에서 지정한 애니메이션 이름은 animation-name 속성 값으로 사용하며, animation-name 속성에 의해 해당 애니메이션이 실행됩니다.

@keyframes 규칙 내부에서 form{ }은 시작 지점을 의미하며, 0%로 선언할 수도 있습니다. 이때 특정 시점에서 변화하는 선언 값을 지정하고자 할 경우, 중간 단계를 백분율(percentage)로 지정할 수 있습니다.

마지막 to( ) 구문은 종료 지점을 의미하며, 100%로 선언할 수도 있습니다.

@keyframes zoom {
	from {
		width: 100px;
		background: rgba(0,0,255,0.5);
	}
	50% {
		transform: scale(1.2,1.2);
	}
	to {
		width: 400px;
		background: rgba(255,0,0,0.5);
	}
}

MDN Keyframes at-rule

📌 animation-name

animation-name 속성은 @keyframes 규칙으로 생성한 애니메애션 이름을 지정하여 해당 애니메이션이 실행되도록 하는 속성입니다. 이때 실행하고자 하는 애니메이션이 여러 개인 경우 애니메이션 이름을 콤마(,)로 구분하여 지정할 수 있습니다.

📌 animation-duration