[TIL] CSS Break down (Animation)

What is Animations?

말 그대로 약간의 동적인 느낌을 준다. 자바스크립트의 도움 없이 간단히 구현할 수 있는 동적인 표현으로, 이것만으로도 만들어 낼 수 있는 것들이 매우 많다. 이를 실행하기 위한 규칙을 알아보자.

How to use?

@keyframes 애니메이션이름!! {
  /* [ from ~ to 속성 ] */
  /* 애니메이션의 시작 프레임 */
  from {}
  /* 애니메이션의 종료 프레임 */
  to {}
  /* [ 0% ~ 100% 속성 ] */
  /* 애니메이션의 시작 프레임 */
  0% {}
  50% {}
  /* 애니메이션의 종료 프레임 */
  100% {}
  애니메이션을 적용할 요소 {
  animation-name: 애니메이션이름!!;
  animation-duration: 2s; /*음수이면 재생안됨*/
  animation-iteration-count: infinite; /*무한재생*/
  animation-direction: 재생방향을의미;
  }

이처럼 @앳 사인으로 선언하는게 특징이다.
from-to보다는 %가 더 많이 쓰인다.

1. @으로 애니메이션의 이름을 선언한다.
2. 시작부터 끝까지 단위를 쪼개어 구간마다의 변화를 정의한다.
3. 적용할 요소에 animation-name으로 적용할 애니메이션을 부른다.
4. 지속시간을 선언한다.
5. 반복횟수를 선언한다.

animation-direction!

animation-direction: normal;            /* 순방향 재생 */
animation-direction: reverse;           /* 역방향 재생 */
animation-direction: alternate;         /* 순방향 시작, 순방향-역방향 번갈아 재생 */
animation-direction: alternate-reverse; /* 역방향 시작, 역방향-순방향 번갈아 재생 */

만일 시작점과 끝점이 같지않고 무한재생을 하게되면, 끝나고 다시 재생되는 순간 툭 끊기는 느낌이 든다. 이를 해결하려면 두 가지 방법이 있다.

1. 시작점과 끝점을 같게 하기
2. alternate를 주어 끊기는 느낌 없게 재생하기

animation-timing-function & delay

애니메이션 역시 트랜지션처럼 진행속도와 시작시간을 조절할 수 있다.

animation-timing-function: cubic-bazier(n, n, n, n)으로 할 수 있으며, 크롬 개발자 도구에서 직접 조정하여 값을 확인해 볼 수 있다.
animation-delay: 1s; 1초 늦게 재생된다.

https://github.com/ssssssjay/learning/blob/main/animation.html

New!!!

animation-fill-mode: forwards; : 만약 애니메이션을 무한반복이 아니라 n회만 재생한다면, 재생이 끝나고 맨 처음의 상태로 돌아간다.(from, 0%) 이 때 끝 지점에서 멈추게하는 속성이다.