[html/css] Transition과 Animation의 차이 (수정중)

 Transition & Animation 

기존에는 웹페이지 내에서 동적인 효과를 주려면 Flash나 Javascript의 도움이 있어야먄 했다.
하지만, transition과 animation 속성이 새로 정의되면서 더 간단하고 빠르게 모션 효과를 구현 할 수 있게 되었다.

먼저 transition은 css 속성을 변경할 때 과정의 속도를 조절하는 속성이다.
단순히 과정을 조정하는 역할이기 때문에 조정할 수 있는 선택지도 적고, 종료 후에는 상태가 유지되지 않는다.
반면 animation은 @keyframes와 같은 속성을 활용해 요소의 다양한 상태를 지정할 수 있고, 종료된 후에도 원하는 상태를 유지할 수 있다.

---

Transition

css 속성을 변경할 때 해당 요소의 움직임을 부드럽게 처리하는 역할의 속성이다.

전환(transition) 속성은 적용 즉시 변경되는 것이 아니라

속성의 변화가 일정 기간에 걸쳐 일어나도록 조정하는 역할이기 때문에 반드시 사용자의 행위가 필요하다.

transition 속성의 적용대상 및 기본 값
적용 대상	모든 요소, 가상선택자
상속 여부	X
기본값	transition-delay	0초
	transition-duration	0초
	transition-property	모두
	transition-timing-function	ease
	transition-behavior	normal
transition 속성
transition-delay	전환효과가 발생하기 전까지 지연시간을 설정하는 속성.
transition-duration	전환효과가 지속될 시간을 설정하는 속성.
transition-property	전환효과의 대상이 되는 css 프로퍼티명을 지정하는 속성.
transition-timing-function	전환효과의 시간당 속도를 설정하는 속성.
transition-behavior

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/transform-function

<transform-function> - CSS: Cascading Style Sheets | MDN

transition-behavior/mdn

transition-behavior - CSS: Cascading Style Sheets | MDN

 

 

 

https://velog.io/@gotaek/animation%EA%B3%BC-transition

animation과 transition

 

https://simsimjae.medium.com/%ED%8A%B8%EB%9E%9C%EC%A7%80%EC%85%98%EC%9D%98-%ED%8A%B9%EC%A7%95-5cbda83fa142

트랜지션의 특징

 

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%ED%8A%B8%EB%9E%9C%EC%A7%80%EC%85%98-%ED%8A%B8%EB%9E%9C%EC%8A%A4%ED%8F%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98#css_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

🎨 transition / transform / animation 속성 사용법

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

https://d-sup.github.io/html%20css/animation/#transition-%EC%86%8D%EC%84%B1%EA%B0%92%EB%93%A4