CSS의 애니메이션 효과

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

애니메이션에는 키프레임이라는 개념이 사용됩니다. 키프레임은 CSS3의 중간 애니메이션 단계를 제어합니다.

아래 예에서는 키프레임 구문을 사용하여 애니메이션의 높이, 너비, 색상, 이름 및 지속 시간을 표시합니다. -

Syntax

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

위 내용은 CSS의 애니메이션 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!