CSS의 애니메이션 효과

애니메이션은 모션 효과를 만들고 모양을 변경하는 프로세스입니다.CSS는 이벤트 모션을 변경하기 위해 다양한 애니메이션 효과를 지원합니다.

애니메이션에서 개념 키프레임이 사용됩니다. 키프레임은 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;
}