css Transitions

transition은 요소의 상태 변화를 부드럽게 애니메이션하는 방법입니다.

1. CSS Transitions (트랜지션)

.element {
  transition: [property] [duration] [timing-function] [delay];
}

• property → 애니메이션할 CSS 속성 (all 사용 가능)
• duration → 애니메이션 지속 시간 (s, ms)
• timing-function → 속도 곡선 (예: ease, linear)
• delay → 지연 시간 (선택적)

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 0.5s ease-in-out, background-color 1s;
}

.box:hover {
  width: 200px;
  background: red;
}

• width는 0.5초 동안 ease-in-out 타이밍으로 변화
• background-color는 1초 동안 변화

2. @keyframes (애니메이션)

@keyframes는 보다 세밀한 애니메이션을 정의할 때 사용됩니다.

@keyframes animation-name {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.element {
  animation: animation-name 2s infinite;
}

• 요소가 2초 동안 서서히 나타나는 애니메이션

3. 타이밍 함수 (Timing Functions)

• 애니메이션 속도를 조절하는 함수입니다

값	설명
linear	일정한 속도로 변화
ease	천천히 시작 → 빠르게 → 천천히 종료 (기본값)
ease-in	천천히 시작
ease-out	천천히 종료
ease-in-out	천천히 시작, 천천히 종료
cubic-bezier(x1, y1, x2, y2)	사용자 정의 커브

.box {
  transition: transform 1s cubic-bezier(0.42, 0, 0.58, 1);
}

• cubic-bezier를 사용해 맞춤 속도 조절 가능

4. display: none; 요소와 Transitions

• 문제점
  display: none;은 트랜지션이 작동하지 않음
  이유: display 속성은 "애니메이션 가능한 속성"이 아니기 때문
• 해결 방법
  opacity와 visibility를 함께 사용
  height 또는 max-height를 애니메이션

.box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.box.show {
  opacity: 1;
  visibility: visible;
}

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.menu.open {
  max-height: 300px;
}

• display 대신 opacity, visibility, max-height 등을 활용

5. 애니메이션을 감지하는 자바스크립트 이벤트 핸들러

이벤트	설명
transitionstart	트랜지션 시작 시 발생
transitionend	트랜지션 완료 시 발생
animationstart	애니메이션 시작 시 발생
animationend	애니메이션 종료 시 발생
animationiteration	애니메이션 반복 시 발생

const box = document.querySelector(".box");

box.addEventListener("transitionend", () => {
  console.log("트랜지션 완료!");
});

• 트랜지션 감지

const animatedElement = document.querySelector(".animated");

animatedElement.addEventListener("animationend", () => {
  console.log("애니메이션 종료!");
});

• 애니메이션 감지

animatedElement.addEventListener("animationend", (event) => {
  if (event.animationName === "fadeIn") {
    console.log("fadeIn 애니메이션이 끝났습니다!");
  }
});

• 특정 애니메이션만 감지
• event.animationName을 사용해 특정 애니메이션만 감지 가능