[CSS] CSS 애니메이션

이진이·2023년 8월 20일

✅ Transform, Transition, Animation은 css3에 등장했다.

Transition

상태 변화에 따라 CSS 프로퍼티가 변경되면 변경에 따른 변화는 지체없이 즉시 발생한다.

<div id = "test1"></div>
<style>
  #test1 {
  width:100px;
  height:100px;
  background:red;
  }
  #test1:hover {
      border-radius: 50%;
      background: blue;
    }
</style>

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 한다.
즉, 변화하는 과정을 보여줄 때 사용한다.

<div id = "test2"></div>
<style>
  #test2 {
  width:100px;
  height:100px;
  background:red;
  /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
  transition: all 2s;
  }
  #test2:hover {
      border-radius: 50%;
      background: blue;
    }
</style>

이때 transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자 또는 js의 부수적인 액션에 의해 발동된다. 만약 변화를 자동으로 발동시키고 싶다면 Animation을 사용할 수 있다.

div 셀렉터에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터에 트랜지션을 설정하면 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 않는다.

프로퍼티

transition-property

트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다
기본값 : all
복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분
모든 CSS 프로퍼티가 대상이 될 수 없다.

사용 가능한 CSS 프로퍼티

Box model
width height max-width max-height min-width min-height padding margin border-color border-width border-spacing

Background
background-color background-position

좌표
top left right bottom

텍스트
color font-size font-weight letter-spacing line-height text-indent text-shadow vertical-align word-spacing

기타
opacity outline-color outline-offset outline-width visibility z-index

transition-duration

트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
기본값 : 0s

transition-timing-function

트랜지션 효과를 위한 수치 함수를 지정한다.
기본값 : ease

transition-delay

프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
기본값 : 0s

transition

모든 트랜지션 프로퍼티를 한번에 지정한다.
순서 : property duration function delay
기본 값 : all 0 ease 0
duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본 값이 0이므로 어떠한 트랜지션도 실행되지 않는다.

Animation

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다.

transition과 anomation의 차이?

transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면,

animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

CSS 애니메이션과 JS 애니메이션?

일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다.

그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.

비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다.
- 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.
세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다.
- 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.

가장 중요한 것은 브라우저에서 애니메이션 효과가 부드럽게 실행되는 것이다. 그리고 애니메이션 효과 작성에 소요되는 시간과 수고이다. 여러 사항들을 고려하여 자바스크립트를 사용하여야 할지 CSS를 사용하여야 할지 결정하여야 한다.

프로퍼티

animation-name

@keyframes 애니메이션 이름을 지정한다

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
기본값 : 0s
반드시 지정해야 한다.

animation-timing-function

애니메이션 효과를 위한 타이밍 함수를 지정한다.
기본값 : ease

animation-delay

요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
기본값 : 0s

animation-iteration-count

애니메이션 재생 횟수를 지정한다. 숫자 또는 infinite
기본값 : 1

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
기본값 : normal
- alternate : from → to → from
- normal : from → to, from → to
- reverse : to → from, to → from

animation-fill-mode

애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.

animation-play-state

애니메이션 재생 상태(재생 또는 중지)를 지정한다.
기본값 : running

animation

모든 애니메이션 프로퍼티를 한번에 지정한다

@keyframes

시간의 흐름에 따라 애니메이션을 정의한다.
여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.

@keyframes [name]{
  /* 애니메이션 시작 시점 */
  from { left: 0; }
  /* 애니메이션 종료 시점 */
  to   { left: 300px; }
}

//또는 

@keyframes [name] {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}