CSS 애니메이션

 

CSS 애니메이션: 웹 페이지에 생동감을 불어넣는 마법

CSS 애니메이션은 정적인 웹 페이지에 생명을 불어넣어 더욱 매력적으로 만드는 강력한 도구입니다. HTML 요소에 다양한 효과를 부여하여 사용자 경험을 향상시킬 수 있습니다.

CSS 애니메이션의 기본 개념

CSS 애니메이션은 특정 요소의 스타일을 시간에 따라 점진적으로 변경하는 것을 의미합니다. 예를 들어, 버튼을 클릭하면 버튼의 크기가 커지고 색깔이 변하는 등의 효과를 줄 수 있습니다.

CSS 애니메이션을 위한 주요 속성

• animation: 애니메이션을 적용할 요소에 대한 전반적인 설정을 합니다.
  • animation-name: 애니메이션의 이름을 지정합니다.
  • animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 지정합니다.
  • animation-timing-function: 애니메이션의 속도를 조절하는 함수를 지정합니다.
  • animation-iteration-count: 애니메이션이 반복되는 횟수를 지정합니다.
  • animation-direction: 애니메이션의 방향을 지정합니다.
  • animation-delay: 애니메이션이 시작되기 전에 기다리는 시간을 지정합니다.
  • animation-fill-mode: 애니메이션이 끝난 후 요소의 스타일을 어떻게 처리할지 지정합니다.

@keyframes 규칙

애니메이션의 각 단계를 정의하기 위해 @keyframes 규칙을 사용합니다.

CSS

@keyframes myanimation {
  0% {
    /* 애니메이션 시작 시 스타일 */
  }
  50% {
    /* 애니메이션 중간 시점 스타일 */
  }
  100% {
    /* 애니메이션 끝 시점 스타일 */
  }
}

코드를 사용할 때는 주의가 필요합니다.

 

예시: 버튼 클릭 시 크기 변화

HTML

<button class="my-button">클릭</button>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

.my-button {
  transition: all 0.5s ease-in-out;
}

.my-button:hover {
  transform: scale(1.2);
}

코드를 사용할 때는 주의가 필요합니다.

 

• transition 속성을 사용하여 부드러운 변화를 구현했습니다.
• ease-in-out은 처음과 끝 부분에서 속도가 느리고 가운데 부분에서 속도가 빨라지는 효과를 줍니다.

다양한 timing-function 예시

• linear: 속도가 일정하게 유지됩니다.
• ease: 처음과 끝 부분에서 속도가 느리고 가운데 부분에서 속도가 빨라집니다.
• ease-in: 처음 부분에서 속도가 느리고 끝 부분으로 갈수록 속도가 빨라집니다.
• ease-out: 처음 부분에서 속도가 빠르고 끝 부분으로 갈수록 속도가 느려집니다.
• ease-in-out: 처음과 끝 부분에서 속도가 느리고 가운데 부분에서 속도가 빨라집니다.
• cubic-bezier(x1, y1, x2, y2): 커스텀 곡선을 만들어 더욱 다양한 효과를 줄 수 있습니다.

더 복잡한 애니메이션 예시

HTML

<div class="card"></div>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

@keyframes cardAnimation {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.card {
  animation: cardAnimation 1s ease-in-out;
}

코드를 사용할 때는 주의가 필요합니다.

 

위 예시는 카드가 아래에서 위로 나타나는 애니메이션을 구현합니다. transform 속성을 이용하여 위치를 조절하고, opacity 속성을 이용하여 투명도를 조절합니다.

마무리

CSS 애니메이션은 웹 페이지에 생동감을 불어넣고 사용자 경험을 향상시키는 데 매우 유용한 도구입니다. 다양한 속성과 함수를 조합하여 자신만의 독창적인 애니메이션을 만들어 보세요.