[CSS] transition - 스타일 전환 효과

 transition - 스타일 전환 효과

 
엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다. 

 

속성	설명
transition	모든 transition 속성을 이용한 스타일을 한 줄로 설정
transition-property	요소에 추가할 전환효과를 설정
transition-duration	전환효과가 지속될 시간을 설정
transition-timing-function	전환효과의 시간당 속도를 설정
transition-delay	전환효과가 나타나기 전까지의 지연 시간을 설정

 

---

 

[transition-timing-function 속성]

 

속성	효과
linear	전환효과가 처음부터 끝까지 일정한 속도로 진행
ease (기본값)	천천히 시작되어, 빨라지고, 마지막에 다시 느려진다.
ease-in	효과가 천천히 시작
ease-out	효과가 천천히 끝남
ease-in-out	천천히 시작되어, 천천히 끝남
cubic-bezier(n,n,n,n)	전환효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

 
 

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

 
 

• 지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않는다.
• 전환(transition) 효과와 변형(transform) 효과의 동시 적용 가능

 
 
transition - CSS: Cascading Style Sheets | MDN (mozilla.org)

transition - CSS: Cascading Style Sheets | MDN