/
/

요소의 이동과 애니메이션

CSStransformtransitionanimationkeyframes
avatar
전상욱
2025.04.10
·
5 min read

트랜스폼 (transform)

  • 요소의 이동, 회전, 확대, 축소, 비틀기 등의 효과를 부여하기 위한 함수를 제공.

  • transform 속성에 원하는 function들을 값으로 전달하면 됨.

  • transform-origin : 요소의 기준점을 설정. 기본적으로는 50%, 50% (center)

  • transform 속성의 skew()를 사용하는 도중 X축과 Y축을 동시에 같이 비틀면 3D 효과처럼 나타낼 수 있음.

사용법

div{
  transform: rotate(90deg) scale(1.5) translate(10px, 10px) skew(10deg)
  // 90˚회전, 1.5배 확대, 오른쪽으로 10px이동, 아래쪽으로 10px이동, 10˚비틀기
}

트랜지션 (transition)

트랜지션은 CSS 속성은 변경할 때 변화하는 그 과정을 조절하는 방법을 제공한다.

트랜지션의 특징

  • transition은 자동으로 발동되지 않는다.

  • 가상 클래스 선택자 또는 JS등의 액션에 의해 발동된다.

  • 자동 발동을 원하면 CSS 애니메이션을 사용한다.

  • 모든 CSS 속성이 transition이 가능한 것은 아니다.

사용법

div{
  transition: width 1s linear 3s;
  // width가 변하는 과정을, 1초동안, 일정한 속도로, 3초있다가 실행
}

설명
transition: property duration timing-function delay;

transition속성을 상세하게 나누어서 작성할 수도 있다.

  • transition-property : 변화를 적용할 CSS속성

  • transition-duration : 변화가 시작된 시점부터 끝날 시점까지의 시간을 지정

  • transition-timing-function : 변화 속도의 패턴을 지정

  • transition-delay : 변화를 시작할 시간 지정

애니메이션 (animation)

  • 단순히 요소의 프로퍼티 변화로 동작하는 transition과 달리, 애니메이션 속성은 하나의 줄거리를 구성하고 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하며 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

  • 일반적으로 JS를 이용한 애니메이션보다 더 나은 렌더링 성능을 가진다고 알려졌지만, 경우에 따라 다르다.

  • 비교적 작은 효과나 CSS만으로 충분한 효과를 볼 수 있는가VS 바운스, 중지, 되감기 등의 고급 효과가 필요한가 (JS로)

  • transition에 비해 훨씬 디테일한 조정(움직임 중 hover시 정지 등)이 더 쉽고 용이하다.

사용법

div{
  animation: ani 10s infinite;
  // ani라는 이름을 가진 애니메이션을 실행, 10초동안, 무한반복
}
@keyframes ani{
  0%   {width: 0%;}
  100% {width: 100%;}
}

설명
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation속성 또한 상세하게 나누어서 작성할 수도 있다.

  • animation-name : 애니메이션의 이름

  • animation-delay : 애니메이션을 시작할 시간 지정

  • animation-direction : 애니메이션이 종료되고 처음부터 다시 실행할지, 역방향으로 진행할지 지정

  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정 (infinite로 지정하면 무한반복)

  • animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있음.

  • animation-timing-function : 중간 상태들의 속도패턴을 지정.

  • animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 어떤 값이 적용될지 지정

- 컬렉션 아티클