Animation

css로 애니메이션을 만드는 방법은 2가지이고 transition 과 animation이 있다.

Animation

Css 애니메이션은 Transition처럼 요소의 스타일에 작성하는 것이 아닌 별개의 함수처럼 작성하고 HTML 요소에 스타일에 추가하는 방식으로 만든다.

.box {
transtion : all .2s ...options; /* 트랜지션 적용 */
animation : name ...options /* 애니메이션 적용*/
}

⭐️ Animation과 transition의 가장큰 차이

• Animation은 다양한 효과를 keyframe 형태로 정의하여 특정 부분에서 원하는 효과를 자유자재로 다룰 수 있고, 제공되는 옵션들이 풍부하여 더 인터렉티브한 웹을 만들 수 있다.

• Transition은 다양한 효과를 줄 수 있지만 간단하고 단방향적인 애니메이션만을 지원한다. 제공되는 옵션도 풍부하지 못하여 간단한 애니메이션을 만들기에 적합하다.

---

애니메이션을 만드는 방법

CSS 애니메이션은 Transition과는 다르게 함수처럼 애니메이션 자체를 선언해야한다. 또한, 동영상을 제작할 때 적용되는 개념인 keyframe과 타임라인을 알고 있어야 한다.

타임라인과 키프레임

• 타임라인 : 애니메이션의 시작과 끝까지를 지칭하는 용어 2초의 애니메이션은 2초의 타임라인을 가진다.
• 키프레임 : 애니메이션에 중요한 변화가 있는 지점을 타임라인에 지정한 것으로 키프레임을 지정함으로 다양한 효과를 추가하거나 제거할 수 있다.

간단히 말해서 타임라인이 2초인 애니메이션에서 1초에 다른 애니메이션을 추가하거나 삭제할때 키프레임을 사용한다.

애니메이션 선언

애니메이션 선언부에서는 어떤 CSS 속성을 어떤 키프레임에서 변화시킬지 지정해주기만 하면됩니다.

/* 애니메이션 선언 */
@keyframes 이름 {
	/* 0% ~ 100% 로 keyframe을 지정하여 애니메이션 타임라인에 다양한 효과를 지정할 수 있다.*/
	0%{} /* 키프레임 */
	50%{}/* 키프레임 */
	100%{}/* 키프레임 */
}

애니메이션 적용

애니메이션 할당부에서는 어떤 애니메이션을 사용할지, 실행시간은 몇초인지 등 애니메이션 진행에 관련된 옵션을 사용 할 수 있습니다.

.box{
	width:100px;
    height:100px;
    background:black;
    animation: 이름 2s linear;  /* 함축적 표현 */
}

⭐️ 이처럼 애니메이션은 함수처럼 선언하고 애니메이션이 필요한 요소에서 불러서 사용합니다. 또한 다양한 옵션을 사용해 여러가지 효과를 줄 수 있습니다.

---

Animation Option

중요❗️
⭐️ 표시는 필수로 입력해야 하는 값입니다.

• ⭐️ animation-duration: 애니메이션의 진행 시간을 설정합니다.

.box{
	animation-duration: 1s; /* 1초의 타임라인을 가지고 1초 동안 진행하는 애니메이션 */
}

• animation-timing-function: 애니메이션의 가속도를 설정합니다.

.box{
	animation-timing-function: ease /* 기본 값 */
	animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) /* 이징 커브를 통해 커스텀 가능 */
}

• animation-delay: 애니메이션 실행에 지연을 가집니다.

.box{
	animation-delay: 0s; /* 기본 값 */
	animation-delay: 1s; /* HTML 요소가 도큐먼트에 렌더링 되고 1초의 지연 시간을 가진 후 애니메이션이 실행됩니다. */
}

• animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다 ( 숫자 1 ~ infinity )

.box{
	animation-iteration-count: 1 /*기본값 1회 반복*/
	animation-iteration-count: infinite; /* 무한히 작동하는 애니메이션 */
}

• animation-direction :

.box{
	animation-direction: nomal /* 기본값: 애니메이션이 0% -> 100% 로 진행됩니다. */
	animation-direction: alternate /* 애니메이션이 0% -> 100% -> 0% 로 진행됩니다. ( 정삭적으로 시작해서 다시 돌아옴 )*/
    animation-direction: alternate-reverse /* 애니메이션이 100% -> 0 -> 100% 로 진행됩니다. ( 반대에서 시작해서 다시 돌아옴 )*/
    animation-direction: reverse /* 애니메이션이 100% -> 0% 로 진행됩니다. ( 반대로 진행 ) */
}

• animation-fill-mode: 애니메이션이 끝난 후의 상태를 설정합니다.

.box{
	animation-fill-mode: none (기본값); /* 애니메이션 종료시 최초의 상태로 돌아갑니다. */
    animation-fill-mode: forwards /* 애니메이션 종료시 최종 상태를 유지합니다. */
    animation-fill-mode: backwards /* 애니메이션 시작전 0% 상태를 적용합니다. 원래는 기본적으로 정의되어있는 스타일이 적용되지만 이 설정을 하면 애니메이션의 0%의 스타일이 적용됩니다.*/
	animation-fill-mode: both /* backwards와 forwards를 둘 다 적용합니다.  */
}

• animation-play-state: 애니메이션의 재생 상태를 설정합니다.

.box{
	animation-play-state: running; /* 기본값 */
  	animation-play-state: paused; /* 일시정지 */
}

.box:hover{
	animation-play-state: paused; /* 마우스 호버 상태가 되면 애니메이션이 일시정지 합니다. */
}

• ⭐️ animation-name: 사용할 애니메이션을 명시합니다.

.box{
	animation-name: sample-animation; /* 선언된 애니메이션중 sample-animation 애니메이션을 사용*/
}

• animation-timeline: 애니메이션의 재생을 시간축(timeline)과 동기화하는 데 사용됩니다.

.box{
	animation-timeline: auto; /* 기본값 */
	animation-timeline: my-timeline; /* 시간축 지정 */
}

• animation-range-start: 애니메이션을 타임라인의 특정 부분부터 재생할 수 있습니다.
  이 속성은 대부분의 브라우저가 지원하지 않습니다.

.box{
	animation-range-start: nomal; /* 기본값 */
	animation-range-start: 20%; /* 애니메이션의 20% 지점에서 시작 */
}

• animation-range-end: 애니메이션을 타임라인의 특정 부분에서 종료시킬 수 있습니다.
  이 속성은 대부분의 브라우저가 지원하지 않습니다.

.box{
	animation-range-end: noaml; /* 기본값 */
   	animation-range-end: 80%; /* 애니메이션의 80% 지점에서 끝 */
}