[CSS] #13 CSS 트랜지션 & 애니메이션 완전 정리! 인터랙션 효과 쉽게 구현하기

 

안녕하세요, 토스트데브입니다!
오늘은 웹사이트에 생동감을 더해주는 CSS 트랜지션(transition)과 애니메이션(animation)에 대해 알아보겠습니다.

정적인 웹페이지에서 버튼에 마우스를 올릴 때 색이 부드럽게 변한다든지, 스크롤 시 요소가 자연스럽게 등장한다면, 사용자 경험이 훨씬 좋아지겠죠? 
이런 효과들을 CSS만으로 손쉽게 구현할 수 있습니다!

 

 

1️⃣ 트랜지션(Transition)이란?

트랜지션은 특정 속성 값이 변경될 때, 그 변화가 일정 시간에 걸쳐 부드럽게 일어나도록 만들어줍니다.

✅ 기본 문법

transition: [속성] [지속시간] [타이밍 함수] [지연시간];

 

✅ 예시

button {
  background-color: skyblue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: royalblue;
}

👉 마우스를 올리면 배경색이 0.3초 동안 자연스럽게 바뀜

 

 

2️⃣ 트랜지션 속성 종류

속성	설명
transition-property	변화시킬 속성 지정 (예: background-color)
transition-duration	변화 지속 시간 (ex: 0.5s)
transition-timing-function	변화 속도 곡선 (예: ease, linear, ease-in, ease-out, cubic-bezier)
transition-delay	변화 시작 전 지연 시간

 

 

3️⃣ 여러 속성에 트랜지션 적용하기

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

💡 all 키워드를 사용하면 요소의 모든 변화에 트랜지션 적용

 

 

4️⃣ 애니메이션(Animation)이란?

애니메이션은 시간의 흐름에 따라 속성을 반복적 또는 순차적으로 변화시키는 기능입니다.
단순한 변화뿐 아니라 복잡한 움직임도 표현할 수 있습니다.

 

 

5️⃣ 기본 문법

✅ keyframes 정의

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

 

✅ 요소에 적용

.box {
  animation-name: moveBox;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

 

 

6️⃣ 주요 애니메이션 속성

속성	설명
animation-name	사용할 keyframes 이름
animation-duration	애니메이션 지속 시간
animation-timing-function	속도 곡선
animation-delay	애니메이션 시작 전 지연 시간
animation-iteration-count	반복 횟수 (infinite는 무한 반복)
animation-direction	정방향/역방향 반복 (alternate 등)
animation-fill-mode	애니메이션 시작 전·끝난 후 상태 유지 여부

 

 

7️⃣ 단축 속성 사용 예시

.box {
  animation: moveBox 1s ease-in-out 0s infinite alternate;
}

💡 순서: name duration timing-function delay iteration-count direction

 

 

8️⃣ 실전 예제: 호버 시 카드 확대 효과

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

 

 

9️⃣ 실전 예제: 페이지 로딩 시 등장 효과

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

.section {
  animation: fadeInUp 1s ease forwards;
}

 

 

✅ 정리하며…

구분	목적	주로 쓰이는 상황
트랜지션	속성 변화 시 부드러운 효과	버튼 hover, 색상 변경, 크기 확대
애니메이션	연속적/복잡한 움직임 구현	로딩 효과, 스크롤 등장, 텍스트 타이핑 등

둘 다 CSS만으로 자연스럽고 매력적인 인터랙션을 구현할 수 있게 해줍니다.
처음에는 간단한 hover 트랜지션부터 시작해, keyframes를 활용한 애니메이션까지 단계적으로 연습해보세요!

 

 

#CSS트랜지션 #CSS애니메이션 #keyframes #transition #animation #웹디자인기초 #프론트엔드기초 #인터랙션디자인 #hover효과 #웹개발입문