CSS Transition 정리

CSS Transition는 요소를 애니메이션화하는 CSS 의 기능입니다. CSS로 애니메이션화에는 CSS Transition 그리고 CSS Animation 두 가지 기능이 있습니다.

이번에는 CSS 애니메이션에 관한 프로퍼티를 소개합니다.

CSS Transition 이란?

속성에 변경이 있었을 때, 일정 시간에 속성을 변경시키는 기능입니다. 키프레임 애니메이션을 적용하지 않기 때문에, 미세한 움직임의 애니메이션을 구현보다는 간단한 움직임의 애니메이션을 구현할 때 이용합니다.

키프레임 애니메이션이란?

키프레임 애니메이션이란 애니메이션의 시작(0%)부터 종료(100%)까지의 임의의 경과 지점에 프로퍼티를 지정할 수 있는 애니메이션입니다. (속성을 지정한 경과 지점을 키프레임이라고 한다)

CSS Transition을 이용한 애니메이션 구현하기

CSS Transition를 이용하기 위해서, transition를 지정해 요소를 애니메이션 시켜 보도록 하겠습니다.

요소를 호버했을 때에 애니메이션시켜 보자

다음은 .box 호버 때 background 와 width 변경하는 코드입니다.

background 가 #000→ #ccc 로, witdh 가 100px → 300px 로 순간적 으로 변화하고 있는 것을 알 수 있습니다.

html

<div class="box"></div>

css

.box {
  width: 100px;
  height: 100px;
  background: #000;
}

.box:hover {
  background: #ccc;
  width: 300px;
}

 

이것을 순간적이 아니라 일정 시간동안 변화시키고 싶다면, 변경할 .box 에 transition: all 300ms 0s ease; 를 추가합니다. (0.3초간 애니메이션)

html 

<div class="box"></div>

css

.box {
  width: 100px;
  height: 100px;
  background: #000;
  transition: all 300ms 0s ease;
}

.box:hover {
  background: #ccc;
  width: 300px;
}

 

그러면 일정 시간동안 변화하게 됩니다. 이와 같이 CSS transition 을 지정하는 것으로 애니메이션을 구현할 수 있습니다.

또한 transition 은 여러 속성의 값을 함께 지정하는 속성이기 때문에, transition: all 300ms 0s ease; 는 아래와 같이 기술할 수도 있습니다.

css

.box {
  width: 100px;
  height: 100px;
  background: #000;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 0s;
  transition-timing-function: ease;
}

 

CSS transition 속성

다음은 함께 지정할 수 있는 속성입니다.

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

transition-property

어떤 속성에 애니메이션을 적용할지 지정하는 속성입니다. all를 지정하면 모든 속성에 애니메이션을 적용합니다. 

transition-duration

애니메이션 시작부터 종료까지의 소요 시간을 지정하는 속성입니다.

transition-delay

애니메이션이 시작되기까지의 지연 시간을 지정하는 속성입니다.

transition-timing-function

애니메이션의 여유를 지정하는 속성입니다.

CSS Transition 을 이용한 애니메이션 이벤트 얻기

CSS Transition을 이용한 애니메이션의 시작시나, 종료시 등의 이벤트를 취득할 수 있습니다.
아래는 애니메이션 종료시 transitionend 이벤트를 취득해 애니메이션 횟수를 가산하고 있는 데모입니다.

html

<div class="box"></div>
애니메이션 회수:<span class="count"></div>

css

.box {
  width: 100px;
  height: 100px;
  background: #000;
  transition: all 300ms 0s ease;
}

.box:hover {
  background: #ccc;
  width: 300px;
}

자바스크립트

var $box = $('.box');
var $count = $('.count');
var count = 1;

$box.on('transitionend', function(e){
  if (e.originalEvent.propertyName === 'width') {
    $count.text(count++);
  }
});