[CSS] Animation

🥸Animation

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

---

✏️ @keyframes

@keyframes는 animation 속성에 적용할 키프레임을 생성하기 위한 규칙입니다.

키프레임이란, 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현됩니다.

@keyframes 애니메이션 이름{
	from {background-color: red;}
	to {background-color: yellow;}
}

@keyframes에서 from{} 속 스타일은 처음 모습, to{} 속 스타일은 변화 후 모습입니다.