css-examples/docs/10_애니메이션 및 트랜지션.md

애니메이션 및 트랜지션

속성	설명
transition
animation
transform
transform-style
perspective
perspective-origin

트랜지션(Transition)

트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성! 예를 들어, 버튼 색상이 변할 때 자연스럽게 변화하도록 설정할 수 있어.

transition

요소의 속성이 즉시 변경되지 않고 부드럽게 전환됨

hover, focus, active 같은 상태 변화에 자주 사용됨

요소 {
  transition: 속성 지속시간 타이밍함수 지연시간;
}

• 속성 : 변화할 CSS 속성 (예: background-color, width, opacity)
• 지속시간 : 변화가 지속될 시간 (s, ms 단위)
• 타이밍 함수 : 변화 속도를 조절 (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier())
• 지연시간 : 효과가 시작되기까지의 대기 시간

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.5s ease-in-out;
}
button:hover {
  background-color: red;
}
/* 버튼에 마우스를 올리면 0.5초 동안 색상이 부드럽게 변함! */

transition-property

트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.

transition-duration

트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.

transition-timing-function

속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.

• ease | linear | step-end | steps(4, end)

transition-delay

속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

여러 속성에 트랜지션 적용

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s, height 0.5s, background-color 0.5s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}
/* 마우스를 올리면 크기와 색상이 동시에 변화! */

all을 사용하면 모든 속성에 적용 가능

transition: all 0.5s ease-in-out;

하지만 all은 성능에 영향을 줄 수 있으므로 필요한 속성만 지정하는 게 좋아!

cubic-bezier()로 커스텀 트랜지션 설정

.box {
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

트랜지션 완료 이벤트

element.addEventListener('transitionend', function(event){
    console.log(event.propertyName);
    console.log(event.elapsedTime);
}, true);

애니메이션(Animation)

애니메이션은 요소의 스타일이 여러 단계로 변하면서 부드럽게 움직이는 효과를 줄 때 사용!

트랜지션은 한 번만 실행되지만, 애니메이션은 반복 실행 가능!

@keyframes

애니메이션의 각 단계를 설정할 수 있음

• from, to 또는 %를 사용하여 여러 단계 지정 가능

@keyframes 애니메이션이름 {
  from {
    속성: 값;
  }
  to {
    속성: 값;
  }
}

from은 0%, to는 100%와 동일!

animation

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.box {
  animation: fadeIn 2s ease-in-out;
}
/* 2초 동안 투명도(opacity)가 0에서1로 변경됨! */

여러 단계 애니메이션 설정

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
.box {
  animation: slide 3s infinite;
}
/* 애니메이션이 왼쪽에서 오른쪽으로 갔다가 다시 돌아옴! */

animation-name

적용할 애니메이션 이름

• @keyframes에서 지정

animation-duration

실행 시간

• s, ms 단위

animation-timing-function

속도 곡선

• ease, linear, ease-in, ease-out

animation-delay

지연 시간 (시작 전 대기)

animation-iteration-count

반복 횟수

• infinite 사용 가능

animation-direction

애니메이션 방향

• normal : 처음부터 끝까지 정상 실행 (기본값)
• reverse : 끝에서 시작으로 거꾸로 실행
• alternate : 처음 → 끝 → 처음 반복
• alternate-reverse :끝 → 처음 → 끝 반복

animation-fill-mode

애니메이션 종료 후 상태. 시작 전/끝난 후 스타일 유지

• none : 애니메이션 종료 후 원래 상태로 돌아감 (기본값)
• forwards : 마지막 상태를 유지
• backwards : 애니메이션 시작 전 첫 번째 프레임 유지
• both : forwards + backwards 효과

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.box {
  animation: bounce 1s infinite alternate ease-in-out;
}

transform

transform 속성은 요소를 이동(translate), 회전(rotate), 확대/축소(scale), 기울이기(skew) 등의 변형을 적용하는 데 사용돼.

• translate(x, y)
• rotate(deg)
• scale(x, y)
• skew(x, y)
• rotateX(deg)
• rotateY(deg)
• rotateZ(deg)
• translate3d(x, y, z)
• scale3d(x, y, z)

여러 변형을 한 번에 적용 가능

.box {
  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
} /* 이동 + 회전 + 확대를 한 번에 적용 가능! */

여러 개의 transform을 조합할 때는 순서가 중요해!

transform-style

부모 요소의 3D 변환을 자식 요소에도 적용할지 결정!

transform-style: preserve-3d;을 사용하면 자식 요소도 3D 공간에 배치됨.

.container {
  perspective: 500px;
  transform-style: preserve-3d;
}
.box {
  transform: rotateY(45deg);
}
/* 부모 요소의 원근 효과가 자식 요소에도 적용됨! */

기본값은 flat (자식 요소는 2D로 표시됨)

perspective

perspective 속성은 3D 효과를 만들기 위해 원근감을 설정하는 데 사용돼.

요소가 멀리 있으면 작아지고, 가까이 있으면 커지도록 설정 가능!

• 카메라와 요소 사이의 거리를 조절
• 값이 작을수록 원근감이 강해지고, 값이 클수록 원근감이 약해짐

.container {
  perspective: 500px;
}
.box {
  transform: rotateY(45deg);
}
/* 원근감 적용 후, Y축 45도 회전! */

perspective-origin

원근 효과의 기준점을 이동

• 기본값: 50% 50% (정중앙)

.container {
  perspective: 600px;
  perspective-origin: left top;
} /* 왼쪽 상단을 기준으로 원근 효과 적용! */