[웹 디자인] 20일차: 애니메이션과 트랜지션

CSS 트랜지션

CSS 트랜지션은 요소의 스타일이 변경될 때 그 변화를 부드럽게 만들어주는 기능입니다. 트랜지션을 사용하면 스타일 변경을 애니메이션처럼 자연스럽게 처리할 수 있습니다.

트랜지션 기본 문법

• transition-property: 트랜지션 효과를 적용할 속성을 지정합니다.
• transition-duration: 트랜지션 효과가 완료되는 데 걸리는 시간을 지정합니다.
• transition-timing-function: 트랜지션 효과의 진행 속도를 지정합니다.
• transition-delay: 트랜지션 효과가 시작되기 전에 대기할 시간을 지정합니다.

예제:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s, height 2s, background-color 2s;
}

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

트랜지션 타이밍 함수

타이밍 함수는 트랜지션 효과의 진행 속도를 제어합니다.

• linear: 일정한 속도로 진행
• ease: 느리게 시작해서 빠르게 진행하고 다시 느리게 종료
• ease-in: 느리게 시작
• ease-out: 느리게 종료
• ease-in-out: 느리게 시작하고 느리게 종료
• cubic-bezier(n, n, n, n): 베지어 곡선을 사용한 커스텀 타이밍 함수

예제:

.box {
  transition: width 2s ease-in-out;
}

CSS 애니메이션

CSS 애니메이션은 키프레임을 사용하여 복잡한 애니메이션 효과를 만들 수 있습니다. 애니메이션은 요소의 스타일을 단계별로 변경할 수 있습니다.

애니메이션 기본 문법

• @keyframes: 애니메이션의 키프레임을 정의합니다.
• animation-name: 애니메이션의 이름을 지정합니다.
• animation-duration: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
• animation-timing-function: 애니메이션의 진행 속도를 지정합니다.
• animation-delay: 애니메이션이 시작되기 전에 대기할 시간을 지정합니다.
• animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다.
• animation-direction: 애니메이션의 진행 방향을 지정합니다.

예제:

@keyframes example {
  0% {
    transform: translateX(0);
    background-color: blue;
  }
  50% {
    transform: translateX(100px);
    background-color: green;
  }
  100% {
    transform: translateX(0);
    background-color: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 4s infinite;
}

애니메이션 속성

• animation-name: 애니메이션의 이름을 지정합니다.
• animation-duration: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
• animation-timing-function: 애니메이션의 진행 속도를 제어합니다.
• animation-delay: 애니메이션이 시작되기 전에 대기할 시간을 지정합니다.
• animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. (숫자 또는 infinite)
• animation-direction: 애니메이션의 진행 방향을 지정합니다. (normal, reverse, alternate, alternate-reverse)
• animation-fill-mode: 애니메이션이 시작하기 전과 종료된 후의 상태를 지정합니다. (none, forwards, backwards, both)
• animation-play-state: 애니메이션의 재생 상태를 지정합니다. (running, paused)

예제:

@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 2s ease-in-out 1s infinite alternate both;
}

결론

CSS 트랜지션과 애니메이션을 사용하면 웹 페이지에 다양한 애니메이션 효과를 추가할 수 있습니다. 트랜지션은 요소의 스타일 변경을 부드럽게 만들어주며, 애니메이션은 키프레임을 사용하여 복잡한 애니메이션 효과를 구현할 수 있습니다. 이번 글에서는 트랜지션과 애니메이션의 기본 개념과 다양한 속성에 대해 배웠습니다.

다음 글에서는 모던 레이아웃 기법에 대해 알아보겠습니다.

다음 글에서 만나요!