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

애니메이션 및 트랜지션

속성	설명	옵션
transition	요소의 속성이 부드럽게 변화하도록 설정	속성 지속시간 타이밍함수 지연시간
animation	요소에 키프레임 기반 애니메이션 효과 적용	이름 지속시간 타이밍함수 지연시간 반복 횟수 방향
transform	요소를 이동, 회전, 확대/축소, 기울이기 변형	translate(x,y), rotate(deg), scale(x,y), skew(x,y)
transform-style	3D 변형을 자식 요소에도 적용할지 여부	flat, preserve-3d
perspective	3D 원근감을 설정
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;
} /* 왼쪽 상단을 기준으로 원근 효과 적용! */