CSS 시각 효과 - transform / transition / animation

transform (변형)

• 요소의 시각적 형태를 변형하는 속성으로, transform: 함수명(값); 형식으로 사용.

• translate(x, y) : 요소의 위치를 X축, Y축 방향으로 이동 (예: translate(50px, 100px))

• scale(x, y) : 요소의 크기를 배율로 조절, 1이 기본값 (예: scale(1.5) → 1.5배 확대)

• rotate(각도) : 요소를 시계 방향으로 회전 (예: rotate(45deg))

• skew(x, y) : 요소를 X축 또는 Y축 기준으로 비틀어 왜곡 (예: skew(20deg, 10deg))

• matrix(a, b, c, d, tx, ty) : 위 변형들을 하나의 행렬로 통합 표현, 주로 라이브러리 내부에서 사용

여러 변형을 동시에 적용할 때는 공백으로 구분해 나열.
예: transform: rotate(45deg) scale(1.2);

transition (전환)

• 속성값이 변화할 때 즉각적으로 바뀌지 않고, 지정한 시간 동안 부드럽게 애니메이션되는 속성.

• transition-property : 전환 효과를 적용할 속성 지정 (all이면 모든 속성에 적용)

• transition-duration : 전환이 완료되는 데 걸리는 시간 (예: 1s, 500ms)

• transition-timing-function : 전환 속도 곡선 지정 (ease, linear, ease-in-out 등)

• transition-delay : 전환 시작 전 대기 시간

• 단축 속성으로 한 줄에 작성 가능.

transition: all 1s ease 0s;
/* property | duration | timing-function | delay */
transform과 transition을 함께 쓰면 호버 시 부드럽게 회전하거나 확대되는 효과 구현 가능.

.box {
  transform: scale(1);
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
}

animation

transition은 단순한 상태 변화(A→B)에 쓰고, animation은 복잡한 흐름(여러 단계, 반복 등)에 사용

주요 속성들:

• animation-name — 실행할 @keyframes 이름 지정 (예: key1, key2)

• animation-duration — 한 사이클 재생 시간 (예: 1s)

• animation-timing-function — 속도 곡선 (linear, ease, ease-in-out 등)

• animation-delay — 시작 전 대기 시간 (예: 0s)

• animation-iteration-count — 반복 횟수 (infinite면 무한 반복)

• animation-direction — 재생 방향

  • normal: 정방향만 반복
  • alternate: 정방향 → 역방향 번갈아
  • alternate-reverse: 역방향 → 정방향 번갈아

• 단축 표기법:

css
animation: key2 1s linear 0s infinite alternate-reverse;

@keyframes

애니메이션의 시간대별 속성값 변화를 정의하는 블록.

key1 — from / to 방식 (2단계, 단순)

css
@keyframes key1 {
    from { width: 150px; }  /* 0% */
    to   { width: 300px; }  /* 100% */
}

key2 — 퍼센트 방식 (다단계, 복잡)

css
@keyframes key2 {
    0%   { width: 150px; }
    25%  { width: 250px; }
    50%  { width: 350px; }  /* 최대 */
    75%  { width: 250px; }
    100% { width: 150px; }  /* 원위치 */
}

주의: @Keyframes처럼 대문자 K는 CSS 표준이 아님. 반드시 @keyframes (소문자)로 작성.

동작 흐름

body에 hover
    → #box에 animation 속성 적용
    → animation-name으로 지정된 @keyframes 실행
    → duration/timing/direction 설정대로 반복 재생
key2처럼 0%와 100%를 같은 값으로 맞추면 animation-direction 없이도 자연스러운 왕복 효과 구현 가능.