HTML&CSS) 웹 애니메이션 구현 종류 4가지

1. CSS Transition

시작과 끝 두개의 상태만 지정할 수 있는 단순한 연출.

어떠한 입력이 있어야만 작동한다. ex)버튼을 눌렀을때, 마우스를 올렸을때 등

버튼을 눌렀을때 어떤 컴포넌트가 부드럽게 등장 하는 등 간단한 작업에 사용하기 좋다. 

 

사용방법

CSS에 transition속성으로 직접 구현

button {
	display: inline-block;
    transition-property: all;
    transition-duration: 0.5s;
}

button:active {
	transform:translate(50px, 50px);
}

<button>이동하는 버튼</button>

 

 

 

2. CSS Keyframe Animation

▷ transition과 비교해서 가능한 것!

시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다. 

입력없이 스스로 작동할 수 있다. 

반복이 가능하다. 

 

▷ 사용방법

키프레임을 만들고 animation 속성으로 동작을 적용한다. 

 

▷ 키프레임: 애니메이션이 동작할 전체 영역(시작과 끝)

    지정 방법: from{} to{} 또는 0% 100%

 

한계: CSS로 정적으로 지정하는것이다보니 때에따라 다른 애니메이션을 적용할때

       일일히 변경된 것을 작성해야되다보니 한계가 있다. 

 

 

 

3. JavaScript web Animation API

자바스크립트로 애니메이션을 컨트롤하고 싶을 때.

CSS Keyframe Animation이 필요하긴 한데 상황에 따라서 연출을 바꾸고싶을때.

예를들어 풍선이 올라가는 애니메이션을 넣는데, A버튼을 누르면 노란색, B버튼을 누르면 파란색 등

상황에 따라 바꿀때 좀더 편하게 바꾸기 위해 사용한다. 

 

 

 

4. JavaScript requestAnimationFrame

매번 실시간으로 애니메이션을 바꿔야 할 경우.

실시간으로 움직이는 게임화면같은 경우.