[Front-end Lao Zhao의 CSS Concise Tutorial] 8-1 CSS animation과 transition의 개념과 사용법

안녕하세요 여러분, 이 프런트엔드 과정에 오신 것을 환영합니다. 프론트엔드의 Lao Zhao입니다.오늘은 CSS 애니메이션과 트랜지션의 개념과 사용법을 배워보겠습니다.

CSS 애니메이션 및 전환을 통해 페이지에 생동감 있고 역동적인 효과를 추가하고 페이지의 사용자 경험을 개선할 수 있으며 현대 웹 디자인의 필수 요소이기도 합니다.

먼저 CSS 전환의 개념을 소개하겠습니다. CSS 트랜지션(transition)은 특정 CSS 속성이 변경될 때 전환 효과를 설정하여 변경이 너무 갑작스럽지 않고 새로운 상태로 부드럽게 전환되도록 하는 것을 말합니다. CSS 전환은 색상, 크기, 위치 등과 같이 한 값에서 다른 값으로 전환하는 모든 CSS 속성에 적용할 수 있습니다.

예를 들어 링크 위로 마우스를 가져가면 링크의 글꼴 색상이 변경되고 CSS 전환을 사용하여 색상을 새 상태로 부드럽게 전환할 수 있습니다.

CSS

a { color: blue; transition: color 0.5s ease; }
a:hover { color: red; }

위의 코드에서 링크의 초기 색상을 파란색으로 설정하고 색상 변경에 대한 전환 효과를 설정했습니다. 링크 위로 마우스를 가져가면 링크의 글꼴 색상이 파란색에서 빨간색으로 부드럽게 전환되고 프로세스가 0.5초 동안 지속됩니다.

CSS 전환 외에도 CSS 애니메이션(애니메이션)을 사용하여 보다 복잡한 동적 효과를 얻을 수 있습니다. CSS 애니메이션은 여러 키프레임(키프레임)으로 구성되며 각 키프레임은 애니메이션의 상태를 정의하고 CSS는 자동으로 중간 상태를 계산하여 동적 효과를 얻습니다.

CSS

 @keyframes myanimation {
    0% {
      transform: scale(1);
    }
    50% {
      transfo