[CSS] transition: 애니메이션 효과

 

transition 속성

: 요소의 상태가 변경될 때, 변경이 즉시 이루어지지 않고 부드럽게 애니메이션 효과를 통해 이루어지도록 하는 속성

 

 

- transition-property: 애니메이션을 적용할 CSS 속성을 지정

• all: 모든 속성에 효과 지정 (기본값) 
• width, height, background-color 등

 

 

a {
   transition-property: width, background-color, transform;
}

 

 

 

- transition-duration: 전환이 완료되는 데 걸리는 시간을 설정

• 시간 단위는 초(s) 또는 밀리초(ms)

a {
   transition-property: width, background-color, transform;
}

 

 

 

- transition-timing-function: 전환 속도를 설정 

• linear: 속도가 일정하게 행
• ease: 시작은 느리게, 중간은 빠르게, 끝은 다시 느리게 진행
• ease-in: 시작은 느리게, 끝은 빠르게 진행
• ease-out: 시작은 빠르게, 끝은 느리게 진행
• ease-in-out: 시작과 끝이 모두 빠르게 진행
• cubic-bezier: 커스텀 값을 사용

a {
   transition-timing-function: ease-in-out;
}

 

 

 

- transition-delay: 전환 효과가 시작되기 전 대기 시간을 설정

• 시간 단위는 초(s) 또는 밀리초(ms)

a {
   transition-delay: 0.2s;
}

 

 

 

 

* transition  단축 속성

a {
   transition: width 2s ease-in-out 1s, background-color 2s ease 0s, transform 2s linear 0s;
}

 

---

 

 

transition - CSS: Cascading Style Sheets | MDN