Transition & Animation

Transition : 속성을 스르륵 자연스럽게 변경할 때 쓰는 프로퍼티

 

 

① property : 변경하고자하는 프로퍼티를 적는다. 모두 변경하고자 할 때는 all

 

② duration : 지속시간

-ms/s

-1000ms=1s

 

③ timing-function : 생략가능, 변화속도

-ease-in : 느림>빠름

-ease-out : 빠름>느림

-ease-in-out : 위에 둘이 섞임

-cubic-beziar() : 사용자가 속도를 설정, 여기에서 쉽게 설정하자...

 

④ delay : 생략가능, ms/s

 

---

Animation : Transition보다 자유도가 큼

 

 

① animation-name : 애니메이션 로직의 이름 설정

 

 

@keyframes name : 어떤 애니메이션을 줄 지 정의

-from { } : 시작

-to { } : 끝

-0%, 50%, 100%와 같이 나누어도 됨

-변화해야하는 속성에 대해서만 정의

 

② animation-duration : 상동

 

③ animation-timing-function : 상동

 

④ animation-delay : 상동

 

⑤ animation-iteration-count : 되풀이 횟수 결정

-1,2,3,4,5...와 같이 정수를 적거나

-infinite로 무한 되풀이 할 수 있음

 

⑥ animation-direction : 애니메이션 진행방향

-alternate : 번갈아가며 방향을 바꿈

 

 

MDN 에서 애니메이션과 관련된 더 많은 속성을 확인할 수 있다.