animation과 transition

GOTAEUK·2022년 5월 2일

웹페이지 제작에서 화면을 부드럽게 제어하는 방법에는 CSS의 animation, CSS의 transition, JS를 사용하는 방법 등 다양한 방법들이 있다. 이 글에서는 animation, transition 사용법과 차이점에 대해 알아보고자 한다.

자바스크립트는 크고 복잡한 화면 전환, 세밀한 제어를 위해 사용되는데 크로스 브라우징 측면에서도 긍정적인 역할을 한다. 그러나 애니메이션은 잘 만들어졌어도 성능이 좋지 못할 때가 있는데 CSS animation을 사용하면 frame-skipping같은 기술이 적용되어 최대한 부드럽게 렌더링한다. 크고 복잡한 애니메이션을 제작하기에 CSS는 한계가 있기 때문에 비교적 작고 가벼운 애니메이션을 만들고자 할 때 사용하는 것이 animation이나 transition이다.

🎠 Animation

animation 속성들에 대한 간략한 설명이다.

animation-name: 애니메이션을 지정한다.

animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.

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

animation-duration: 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.

animation-iteration-count: 애니메이션이 몇 번 반복될지 지정합니다. infinite
로 지정하여 무한히 반복할 수 있다.

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

animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.

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

@keyframes

애니메이션 효과를 적용하기 위해 키프레임(keyframes)을 정의해야 한다. keyframes는 애니메이션의 진행 과정을 정의하는 것이다. 이렇게 from, to를 이용해서 시작과 끝의 상태를 정하면 중간 상태들은 알아서 부드럽게 변환되도록 한다.

@keyframes animation_name { 
	from { 
		transform: translate(0, 0); 
	} 
	to { 
		transform: translate(100px, 100px); 
	} 
}

from과 to 대신 0%와 100% 같이 %를 사용할 수도 있다. 만약 0%와 100%만 사용하여 keyframes을 정의한다면 from과 to를 사용하여 정의한 것과 같다.
중간에 다른 상태가 있기를 원한다면 아래 예시처럼 작성하여 다양한 애니메이션을 제작할 수 있다.

@keyframes name{
	0%{
		transform: translate(0,0);
		background:yellow;
	}
	75%{
		transform: translate(50px,50px);
		background:red;
	}
	100%{
		transform: translate(100px,100px);
		background:green;
	}
}

animation-name

keyframes에서 설정한 이름을 animation-name 속성의 값으로 사용해 애니메이션을 적용한다.

div{
	animation-name: left-to-right;
}
@keyframes left-to-right{
	from{
		left:100px;
	}
	to{
		left:300px;
	}
}

animation-delay

애니메이션 시작을 지연할 시간을 설정하는 속성이다. 숫자와 단위를 지정하면 지정 시간 이후에 애니메이션이 시작되는데 0, now 로 값을 설정했다면 바로 시작한다. 만약 음수로 설정하면 지정한 시간이 지난 뒤의 장면부터 애니메이션이 시작된다. 만약 -3s로 설정했다면 3초뒤의 장면부터 애니메이션이 시작된다.

animation-delay:2s;

animation-direction

애니메이션의 방향을 정하는 속성이다. from 에서 to로의 방향이 순방향이고 to에서 from이 역방향이 된다. 이 속성의 값들로는 normal, reverse, alternate, alternate-reverse로 설정할 수 있다.

normal: 기본값이며 애니메이션을 순방향(from에서 to, 0%에서 100%)으로 진행한다.
reverse: 애니메이션을 역방향(to에서 from, 100%에서 0%)으로 진행한다.
alternate: 홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse: 홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

animation-duration

한 싸이클(from부터 to까지)의 애니메이션을 한 번 재생하는 데 걸리는 시간을 설정할 수 있는 속성이다. 단위는 s 또는 ms이고 기본값은 0이다. 따라서 이 속성을 설정하지 않으면 애니메이션이 동작하지 않는다.

animation-duration:500ms;

animation-iteration-count

애니메이션을 재생하는 횟수를 지정하는 속성이다. 기본값은 1이므로 아무 설정도 안할 시에는 1번만 애니메이션이 동작한다. 지정한 값이 소수이면 애니메이션을 재생하는 도중에 첫 번째 프레임으로 돌아가 멈추고 숫자가 음수이면 애니메이션을 재생하지 않는다. infinite로 지정해 무한 반복을 할 수도 있다.

animation-iteration-count:3;

animation-play-state

애니메이션의 재생 여부를 정의하는 속성으로 기본값은 running이다. 마우스를 올렸을 때 애니메이션의 동작을 멈추게 하고 싶다면 다음 처럼 코드를 작성할 수 있겠다. paused는 애니메이션을 정지한다.

.box{ 
	animation: operate 1s linear infinite; 
} 
.box:hover { 
	animation-play-state: paused; 
}

animation-timing-function

애니메이션의 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다. 예를 들어 ease-in-out 같은 경우는 시작 부분에서 속도가 빠르고 끝으로 갈수록 속도가 느려진다. 즉, animation-timing-function 속성의 경우 애니메이션의 속도를 정하는 것이라고 보면 된다.

animation-timing-function:ease-in-out;

animation-fill-mode

애니메이션이 실행되고 있는 상태가 아닐 때(대기 상태와 종료 상태)에서 어떤 상태로 요소를 놔둘 것인지 설정할 수 있는 속성이다.

none
대기: 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료: 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되 돌리고 종료한다.
forwards
대기: 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료: 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards
대기: 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료: 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both
대기: 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료: 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

animation

모든 애니메이션 속성을 한번에 지정한다. 값을 지정하지 않은 속성에는 기본값이 지정된다. 지정 방법은 다음과 같다.

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

animation:left-to-right 2s ease-in-out 0.5s infinite normal both running

🎠 Transition

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-property

위에 있는 CSS프로퍼티들 중 변화를 줄 트랜지션 대상을 지정하는 속성이다. 만약 지정하지 않으면 모든 프로퍼티가 트랜지션의 대상이 된다. 여러개의 프로퍼티를 지정하고 싶다면 쉼표(,)로 구분하여 나열하면 된다.

transition-property: background, width;

transition-duration

transition-duration은 트랜지션이 일어나는 시간을 설정하는 것이다. 만약 2s이라고 지정하면 2초동안 서서히 상태가 변화하게 된다. 기본값은 0s이기 때문에 아무런 설정도 하지 않으면 트랜지션이 동작하지 않는다. 만약 transition-property에서 property 들을 여러개 정했다면 transition-duration에서도 쉼표(,)로 구분하여 duration을 지정할 수 있다.

transition-duration:2s, 3ms;

transition-timing-function

트랜지션 변화 속도를 정할 수 있는 속성이다. linear, ease, ease-in, ease-out, ease-in-out 등이 값으로 설정될 수 있다. animation-timing-function과 비슷한 속성이다.

transition-timing-function: ease-in-out;

transition-delay

트랜지션이 시작 되기 전의 대기 시간을 설정할 수 있는 속성이다. s과 ms 단위로 값을 설정할 수 있으며 설정 시간 이후에 트랜지션이 실행된다. 만약 2s로 지정했다면 2초 뒤에 변화가 시작되는 것이다. 이 속성도 animation-delay와 비슷한 속성이다.

transition-delay:2s;

transition

모든 트랜지션의 프로퍼티를 한번에 지정할 수 있는 속성이 transition이다. property, duration, function, delay 순으로 설정한다.

transition: property duration function delay

transition: background 2s ease-in 50ms

🎠 transition과 animation의 차이

transition을 사용하면 두가지 상태밖에 지정할 수 없고, 종료 후에 상태유지도 되지 않는다. 반면 animation은 %를 사용하여 다양한 상태를 정의할 수 있다. 또한 animation-fill-mode라는 속성이 있기 때문에 애니메이션이 종료된 후에도 원하는 대로 상태를 유지할 수 있다.

transition은 hover, click 등과 같이 트리거가 있어야 동작하지만 animation에는 animation-play-state 속성이 있기 때문에 원하는 대로 시작, 정지를 지정할 수 있고, animation-iteration-count로 반복횟수도 지정할 수 있다.