css animation

1. CSS에서 animation이란?

 css에서 animation이란, 하나의 element가 다른 상태로 서서히 변하게 하는 것을 말합니다. 

다양한 속성들을 사용해서 원하는 변화를 줄 수 있습니다.

 animation을 사용하기 위해서는 우선적으로 키프레임(keyframes)을 정의해야 합니다. keyframes란 언제 어떤 animation을 줄지 설정하는 것을 말합니다.

---

2. @keyframes 사용법

@keyframes animation-name{ } 형식으로 작성합니다.

여기서 'animation-name'속성은 해당 요소(element)와 keyframes를 연결하는 역할을 합니다.

ex)
@keyframes widthChange{
       from { width:100% } <- animation의 시작
       to { width: 50% }     <- animation의 끝
};

예시의 경우에는 "width를 100%에서 50%만큼 줄여!"라는 의미입니다.

 

from과 to의 경우는 매우 간단한 경우이고, 더 자세하게 설정하고 싶다면

from/to 자리에 0% ~ 100% 사이의 값을 넣고 원하는 스타일을 주면 됩니다. 

 

왜 굳이 귀찮게 그렇게 하냐!!라고 한다면, 좀 더 자연스럽고 보기 좋은 animation을 적용하고 싶을 경우 사용하면 좋습니다.

추가로, 재생이 끝난 animation은 처음에 가지고 있던 style로 되돌아 갑니다. 

---

3. animation의 속성

속성	의미	작성법 ex)
animation-duration	animation의 재생시간 설정	{ animation-duration : 5s; }
animation-direction	animation의 진행방향	{ animation-direction : alternate; }
animation-delay	animation의 재생되기 전의 지연시간	{ animation-delay : -2s };
animation-iteration-count	animation의 반복 횟수	{ animation-iteration-count : infinite; }
animation-timing-function	animation의 시간당 속도	{ animation-timing-function : linear;}
animation-fill-mode	animation이 재생 중이 아닐 때 요소 스타일	{ animation-fill-mode : forwards;}
animation-play-state	animation을 멈추거나 재생.	{ animation-play-state : paused;}
animation 다양한 속성들 결합	animation: example 5s linear 2s infinite alternate; animation: 이름 / 재생시간 5s / 시간당 속도 linear / 지연시간 2s / 반복 횟수:무한 / 진행방향 linear

---

4. animation 속성값

 animation-direction 

• normal - 처음 → 끝으로 진행됩니다. (default) | 선방 향
• reverse - 끝 → 처음으로 진행됩니다. | 역방향
• alternate - 먼저 처음에서 시작한 다음에 그다음에는 끝에서 시작합니다. | 선방 향 > 역방향
• alternate-reverse - 먼저 끝에서 시작하고 그 다음에는 처음에서 시작합니다. | 역방향 > 선방향

 animation-timing-function 

• ease -천천히 시작해서 빠르게 진행되다가 다시 천천히 끝남니다. (default)
• linear - 처음부터 끝까지 같은 속도로 진행됩니다.
• ease-in - 천천히 시작 보통속도로 진행됩니다.
• ease-out - 보통속도로 진행되다가 천천히 끝납니다.
• ease-in-out - 천천히 시작해서 천천히 끝남, 중간이 어떻든 무조건 천천히 시작해서 천천히 끝납니다.
• cubic-bezier(n, n, n, n)- 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

 

 animation-fill-mode

• none - 재생되지 않을 때, element에 스타일을 적용하지 않습니다. 대신 element에는 다른 css style이 적용될 수 있습니다.
• forwards - 재생된 animation의 마지막 keyframes에 의해 설정된 값이 적용됩니다. (animation-direction과 animation-itertion-count값에 따라 달라집니다.)
• backwards - 재생 된 animation의 처음 keyframes에 의해 설정된 값이 적용되며, animation-delay동안 이 값을 유지합니다. (animation-direction 값에 따라 달라집니다)
• both - 앞뒤 양쪽 모두의 설정 값이 적용되어 animation속성이 양방향으로 확장됩니다.

---

▷▶▷ 연관포스팅 ▶▷▶

2019/05/26 - [IT기록 - 개발자/CSS] - css animation 총정리 (transition, transform, translate, animation, @keyframes)