• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기
Front-end/CSS(SASS,SCSS)

[CSS]transition 와 animation 차이

by 빽짱구 2024. 6. 25.
본문글자

 

CSS에서 transition과 animation은 모두 애니메이션을 만들기 위한 속성들이지만, 각각의 목적과 사용 방식에 있어서 다소 차이가 있습니다.

Transition (트랜지션)

목적: 요소의 상태 변화를 부드럽게 처리하는 것이 주된 목적입니다. 주로 상호작용에 반응하여 요소의 상태가 변경될 때 효과적으로 사용됩니다.

 

주요 속성:

  • transition-property: 어떤 CSS 속성에 트랜지션을 적용할지 지정합니다.
  • transition-duration: 트랜지션이 일어나는 시간을 설정합니다.
  • transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.
  • transition-delay: 트랜지션이 시작하기 전에 기다리는 시간을 설정합니다.

사용 예시:

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 0.3s ease-in-out;
}

.box:hover {
    width: 200px;
}

특징:

  • 트랜지션은 요소의 특정 CSS 속성 값이 변경될 때, 그 변경을 자연스럽게 만들어 줍니다.
  • 주로 hover, focus, active 등의 상호작용에서 요소의 크기, 색상 등이 부드럽게 변화할 때 유용하게 사용됩니다.
반응형

Animation (애니메이션)

목적: 더 복잡하고 다양한 애니메이션 효과를 구현하는 것이 주된 목적입니다. 요소에 다양한 동작과 변화를 부여할 수 있습니다.

 

주요 속성:

  • @keyframes: 애니메이션의 중간 상태를 정의합니다.
  • animation-name: 사용할 애니메이션의 이름을 지정합니다.
  • animation-duration: 애니메이션이 진행되는 시간을 설정합니다.
  • animation-timing-function: 애니메이션의 속도 곡선을 정의합니다.
  • animation-delay: 애니메이션이 시작하기 전에 기다리는 시간을 설정합니다.
  • animation-iteration-count: 애니메이션이 반복되는 횟수를 지정합니다.
  • animation-direction: 애니메이션이 재생되는 방향을 설정합니다.

사용 예시:

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: slidein 1s ease-in-out;
}

특징:

  • 애니메이션은 @keyframes 규칙을 사용하여 시작부터 끝까지 다양한 중간 상태를 정의할 수 있습니다.
  • 루프로 반복되거나, 특정 조건에 따라 일시정지하거나, 반대 방향으로 재생되는 등의 제어가 가능합니다.
  • 더 복잡한 애니메이션 효과를 구현할 수 있지만, 단순한 hover 효과와 같은 간단한 상호작용에는 비효율적일 수 있습니다.

요약

  • Transition: 단순한 상태 변화에 대해 부드러운 애니메이션을 추가할 때 유용합니다.
  • Animation: 더 복잡하고 제어가 필요한 애니메이션을 구현할 때 유용하며, 중간 상태를 세밀하게 정의할 수 있습니다.

각각의 사용 목적에 따라 transition과 animation을 적절히 선택하여 웹 페이지나 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

728x90

'Front-end/CSS(SASS,SCSS)'의 다른글

  • 현재글[CSS]transition 와 animation 차이