[CSS] animation

🔗 CSS에서 animation이란?

 

 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜주는 CSS 속성이다. @keyframs를 통해 중간 상태를 지정한다.

 

---

 

animation-name : 애니메이션 이름 지정

 

@keyframes name : 중간 상태 지정
(from : 시점 0% ~ to : 시점 100%)

animation-duration : animation 지속 시간 (몇 초 동안)

 

animation-delay : animation 딜레이 시간 (몇 초 뒤에)

 

animation-timing-fuction : animation 가속도

· linear  default

· ease : 빠름 -> 느림 (ease-out 보다 빠른 속도로 시작)

· ease-in : 느림 -> 빠름

· ease-out : 빠름 -> 느림

· east-in-out : 느림 -> 빠름 -> 느림

 

animation-iteraction-count : 반복

· infinite : 무한 반복

 

animation-direction : 방향

· normal  (0-100% - 0/100% -)  default

· alternate : 왕복 (0-100% - 100/0% -)

· alternate-reverse : 역방향 왕복 (100-0% - 0/100% -)

 

animation-play-state : 재생

· paused : 중지

· running : 재생

---

transform => 앞부터 차례로 적용됨

· rotate(deg) : 회전

· translate(Xpx, Ypx) : 이동

· skew(Xdeg, Ydeg) : 기울임

· scale(X, Y) : 확대 / 축소 (1 : 100%, 0.1 : 10%)  default : 1

 

transform-origin: X축값(left/right) Y축값(top/bottom); : 기준값 설정

---

transform-style: preserve-3d; : 3차원 (3D)

 

transform

· rotate3d(X, Y, Z, deg) : 회전

· translate3d(Xpx, Ypx, Zpx) : 이동

· skew3d(Xdeg, Ydeg, Zdeg) : 기울임

· scale3d(X, Y, Z) : 확대 / 축소 (1 : 100%, 0.1 : 10%)  default : 1

 

 

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 총정리

[CSS] transition