Transition

Transition : 스타일 속성값 변경

 

⏩ transition 단축 속성

     - transition: property, duration, timing-function, delay;

     - [전환 효과] [지속 시간] [진행 속도] [지연]

     - [ex] .element {                                               ➡️      .elment { 

                   transition-property: width;                                  transition: width, 1s, ease-in, 0.3s;

                   transition-duration: 1s;                                        }

                   transition-timing-function: ease-in; 

                   transition-delay: height 0.3s linear;

               }

     - 으로 축약 가능

 

1. transition-property : 전환효과를 적용할 속성값 대상 지정

     - all : 기본값

              trasition 가능한 모든 속성 적용

     - none : 하지 않음

     - 속성값 : 속성값 지정

     - transition-duration과 항상 같이 사용

 

2. transition-duration : transition이 일어나는 지속 시간 지정

     - 시간 설정 : ⚠️시간 단위 사용

                          s : 초

                          ms : 1/1000초

     - 기본값 : 0초 (즉시 발생)

     - 속성별 설정 : 각 속성마다 다른 값 설정 가능

     - [ex] .element {

                          transition-property: width;

                          transition-duration: 0.5s;

                   }

     -➡️ 요소의 너비(width)의 변화가 0.5초 동안 일어난다

 

3. transition-timing-function : 동작 진행 속도 조절

     - ease : 기본값

                  천천히 시작해 점점 빨라지다가 완만하게 종료

     - linear : 일정한 속도로 변화

     - ease-in : 천천히 시작해 점점 빨라지며 종료

     - ease-out : 빠르게 시작해 느려지며 자연스럽게 종료

     - ease-in-out : 천천히 시작해 중간에 가속도를 높여 빠르게 진행 후 완만하게(천천히) 종료

     - [ex] .element {

                          transition-property: width;

                          transition-duration: 1s;

                          transition-timing-function: ease-in-out;

                   }

     - ➡️ 요소의 너비(width)가 1초동안 천천히 시작해 가속도를 높이고 완만하게 끝나며 변한다

 

4. transition-delay : transition 시작 전 대기 시간 시정

     - 시간 설정 : ⚠️초 단위 사용 (s, ms)

     - 기본값 : 0초 (즉시 발생)

     - 속성별 설정 : 각 속성마다 다른 값 설정 가능

     - [ex] .element {

                          transition-property: width;

                          transition-duration: 0.5s;

                          transition-delay: 0.2s;

                   }

     - ➡️ 요소의 너비(width)의 변화 0.2초 기다렸다 시작