[css] animation

animation shorthand 사용하기!

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. - MDN 문서

우선순위, property 이름, 초기값

순서	property	initial	설명
1	animation-name	none	keyframe의 이름
2	animation-duration	0s	총 시간
3	animation-timing-function	ease	사이클 동안의 움직임
4	animation-delay	0s	지연시간
5	animation-iteration-count	1	반복숫자
6	animation-direction	normal	방향 (reverse로 하면 반대로 동작)
7	animation-fill-mode	none	실행 전 후의 스타일
8	animation-play-state	running	play 상태를 정함

duration VS delay 우선순위는 바뀔 수 있는가?

순서는 duration 후에 delay가 된다.

아래와 같은 경우, 1s는 duration을 나타낸다. 1s가 delay라면, duration의 기본값이 0s이므로, 총시간 0s동안 발생하는 animation이 1s뒤에 발생하는데, 이건 말이 안되는 것이다. 따라서 duration이 먼저 정의가 되고, delay가 정의될 수 있다. (stackoverflow 참고)

animation: fadeIn 1s;

Multiple animation 적용하기

1. shorthand에 comma(,) 를 사용하기

• shorthand를 comma로 연결한다.

  animation: 
  	fadeIn 2s ease-in-out 1s forwards,
  	moveUp 2s ease-in-out forwards

2. property에서 comma(,) 를 사용하기

• 각각의 property에서 순서대로 적용할 수 있다.

  animation-name: fadeIn, moveUp;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s, 0s;
  animation-fill-mode: forwards;

• MDN 문서에서 property에 대해 검색해보면 아래와 같은 예시가 있다.

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;