[ReactJS_Complete] CSS: transition

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

transition

: 스타일 변화가 발생했을 때의 전환(transition) 효과를 지정

 

option, timing function

: ease-in

요소의 전환을 천천히 시작하고 빠르게 종료하는 방식
시작할 때는 천천히 움직이다가 점점 가속도를 높여서 종료할 때에는 빠르게 움직이는 효과 부여

 

: ease-out

요소의 전환을 빠르게 시작하고 천천히 종료하는 방식
시작할 때는 빠르게 움직이다가 점점 감속하여 종료할 때에는 천천히 움직이는 효과 부여

 

: ease-in-out

요소의 전환을 천천히 시작하고 천천히 종료하는 방식
시작할 때는 천천히 움직이다가 가속도를 높여 중간 지점에서는 빠르게 움직인 뒤, 종료할 때는 다시 천천히 움직이는 효과 부여

 

 

ease-out 예시

.chart-bar__fill {
    background-color: #4826b9;
    width: 100%;
    transition: all 0.3s ease-out;
}