[CSS]@Keyframes

@keyframes는 css 애니메이션을 정의하는 규칙입니다. 애니메이션의 각 단계별로 정의 하는데 시작, 중간, 끝 상태를 지정할 수 있습니다.

 

@keyframes 사용 방법 
  1. @keyframes 규칙 정의하기
    @keyframes 규칙을 사용하여 애니메이션의 각 단계를 정의합니다.

    0%부터 100%까지의 퍼센트 값을 사용하여 각 단계의 스타일을 지정합니다.

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

  2. 애니메이션 적용하기

    정의한 @keyframes 규칙을 animation 속성을 사용하여 적용합니다.
    animation 속성에는 다음과 같은 하위 속성들이 있습니다:

    animation-name: 애니메이션의 이름을 지정합니다.

    animation-duration: 애니메이션의 지속 시간을 지정합니다.

    animation-timing-function: 애니메이션의 타이밍 함수를 지정합니다.

    animation-delay: 애니메이션의 시작 지연 시간을 지정합니다.

    animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다.

    animation-direction: 애니메이션의 방향을 지정합니다.

img {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes 활용 사례

웹 페이지의 요소에 다양한 애니메이션 효과를 적용할 수 있습니다.

로고, 아이콘, 버튼 등의 요소에 애니메이션을 적용하여 시각적 효과를 높일 수 있습니다. 

스크롤 애니메이션, 로딩 애니메이션 등 다양한 UI 효과를 구현할 수 있습니다. 

 

CSS @keyframes는 웹 페이지에 다양한 애니메이션 효과를 적용할 수 있는 강력한 기능입니다. 이를 통해 사용자 경험을 향상시키고 웹 페이지의 시각적 효과를 높일 수 있습니다.