Transitions와 Animation

CSS의 Transitions와 Animations는 요소의 스타일 변화를 매끄럽게 보여줌으로써 인터페이스를 동적이게 보여준다.

---

1. Transitions

CSS Transitions는 한 상태에서 다른 상태로의 스타일 변화가 부드럽게 진행되도록 설정한다. 일반적으로 사용자 상호작용(예: hover, focus)과 결합된다.

구문

selector {
  transition: property duration timing-function delay;
}

 

property	트랜지션을 적용할 CSS 속성 (예: background-color, transform).
duration	변화가 지속되는 시간 (초 단위 s 또는 밀리초 단위 ms).
timing-function	애니메이션 속도 곡선을 정의 (예: ease, linear, ease-in).
delay	트랜지션이 시작되기 전의 대기 시간.

주요 Timing Functions

• linear: 일정한 속도로 진행.
• ease: 시작과 끝이 부드럽고 중간은 빠르게.
• ease-in: 천천히 시작.
• ease-out: 천천히 종료.
• cubic-bezier(x1, y1, x2, y2): 사용자 정의 속도 곡선.

예제

1. 기본 예제: Hover로 배경색 변경

   button {
     background-color: lightblue;
     transition: background-color 0.3s ease;
   }
   
   button:hover {
     background-color: blue;
   }

   
   
2. 다중 속성에 트랜지션 적용

   div {
     background-color: red;
     width: 100px;
     height: 100px;
     transition: background-color 0.5s ease, width 1s linear;
   }
   
   div:hover {
     background-color: yellow;
     width: 200px;
   }

   
   
3. 지연 시간 추가

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

   
   

---

2. Animations

CSS Animations는 복잡한 키프레임 기반 애니메이션을 설정할 때 사용된다. 상태 변화가 트랜지션보다 더 유연하고 세밀하다.

구문

애니메이션은 두 부분으로 구성된다.

1. Keyframes 정의

   @keyframes animation-name {
     0% { property: value; }
     50% { property: value; }
     100% { property: value; }
   }

   
   
2. 애니메이션 적용

   selector {
     animation: name duration timing-function delay iteration-count direction fill-mode;
   }

   
   

 

name	애니메이션 이름 (keyframes에서 정의).
duration	애니메이션 지속 시간.
timing-function	애니메이션 속도 곡선.
delay	애니메이션 시작 전 대기 시간.
iteration-count	반복 횟수 (1, infinite 등).
direction	애니메이션 반복 방향 (normal, reverse, alternate 등).
fill-mode	애니메이션 시작/종료 후 상태 (none, forwards, backwards).

주요 속성 설명

1. @keyframes : 애니메이션의 각 단계에서 요소 스타일을 정의한다.

   @keyframes slideIn {
     from {
       transform: translateX(-100%);
     }
     to {
       transform: translateX(0);
     }
   }

2. animation-name : 적용할 키프레임을 지정합니다.
3. animation-duration : 애니메이션이 완료되는 데 걸리는 시간.
4. animation-iteration-count : 애니메이션 반복 횟수 (1, 3, infinite).
5. animation-direction
   • normal: 처음부터 끝까지.
   • reverse: 끝에서 처음으로.
   • alternate: 처음부터 끝, 다시 끝에서 처음으로 반복.
6. animation-fill-mode : 애니메이션 실행 전후의 상태를 지정.
   • forwards: 애니메이션 종료 상태 유지.
   • backwards: 시작 상태 유지.
   • both: 실행 전후 모두 유지.