CSS3 애니메이션 @keyframes

키프레임은 CSS3의 중간 애니메이션 단계를 제어합니다.

키프레임 구문을 사용하여 애니메이션의 높이, 너비, 색상, 이름 및 지속 시간을 표시하는 예를 살펴보겠습니다.

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}