transition과 animaition의 차이

프로퍼티	설명	기본값
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)

🤔 transition을 공부하다 보니 animaition의 차이에 대해 궁금해졌습니다.

💡 transition과 animation의 차이
transition을 사용하면 두가지 상태밖에 지정할 수 없고, 종료 후에 상태유지도 되지 않는다. 반면 animation은 %를 사용하여 다양한 상태를 정의할 수 있다. 또한 animation-fill-mode라는 속성이 있기 때문에 애니메이션이 종료된 후에도 원하는 대로 상태를 유지할 수 있다.

transition은 hover, click 등과 같이 트리거가 있어야 동작하지만 animation에는 animation-play-state 속성이 있기 때문에 원하는 대로 시작, 정지를 지정할 수 있고, animation-iteration-count로 반복횟수도 지정할 수 있다.

transition, animation 사용할때 참고 자료

https://poiemaweb.com/css3-transition

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9