[CSS]#16 animation(animation-delay, animaiton-timing-function)

 ▶animation-delay

이 속성은 말 그대로 지정된 animation의 시작을 연착시키는 속성입니다. 

사용예시: animation-delay: 2s;

//참고로 이 곳에 animation: 애니메이션이름 모션스타일 지속 시간; 이 작성돼있어야 겠죠? 

따로 animation과 animaiton-delay를 적어줘도 되고 animation 하나에 delay를 포함해도 됩니다. 

 ▶animation

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다.

초기값 (ref: MDN)

as each of the properties of the shorthand: animation-name (en-US): none animation-duration: 0s animation-timing-function (en-US): ease animation-delay: 0s animation-iteration-count (en-US): 1 animation-direction: normal animation-fill-mode: none animation-play-state (en-US): running

자주 쓰이는 animaiton-timing-function: ( ease-in-out / linear )

▷ ease-in-out

- Equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again.

▷ linear

- Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), animates at an even speed.

 

The order of values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.

->시간에 관련된 속성값을 작성할 때, 순서가 중요합니다. 1) 애니메이션 지속시간(animation-duration) 2) 애니메이션 딜레이 시간(animation-delay)을 작성하는 것을 명심하세요.