[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-04 | CSS Animation

1. @keyframes란?

  - CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능이다. 

  - 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션을 조절하는 기능

  - 키프레임을 변수에 선언하고 해당 변수를 CSS 에서 불러와서 사용할 수 있다.

 

2. @keyframes에서 설정되는 값

  - to/ from

  - 0% ~ 100%

 

3.Animation의 속성?

 1) animation-name(이름): keyframes로 지정한 애니메이션 이름

 2) animation-duration(지속시간): 애니메이션 지속 시간

 3) animation-delay(지연 시간): 애니메이션 시작 전 지연 시간

 4) animation-iteration-count(반복횟수): 반복 횟수를 지정, 소수점 가능 -  ex) infinite ... 

 5) animation-timing-function(진행형태): 애니메이션이 진행되는 형태(시간 함수) - ex) ease, ease-in, ease-out, ease-in-out, linear ...

 6) animation-direction(애니메이션 방향) 

 

4. Animation 단축 속성

 - animation: name duration, timg-function delay iteration-count direction;

animation: ani-name 2s ease-in 5s infinite alternate;