transition - CSS 속성을 천천히 변화 시키기

transition

transition은 속성을 서서히 변화시키는 속성이다.

 

transition-property : transition을 적용시킬 속성을 정한다. 특정사항에 대해서만 transition을 적용할 수 있다.

transition-timing-function : transition 진행 속도를 어떻게 반영할지 지정한다.

transition-duration : 효과가 반영되는 시간을 지정한다.

transition-delay : transition 시작을 연기할 수 있고, 지연 시간을 지정한다.

transition : 트랜지션 속성들을 모아서 지정할 수 있다.

 

 

transition-property

transition을 적용할 속성 이름을 값으로 지정한다. 여러 개의 속성을 지정할 경우 쉼표로 구분한다.

none : 모든 속성에 적용하지 않는다.

all : 모든 속성에 적용한다.

 

 .box1{
            transition-property: background-color;
            transition-duration: 1s;
        }

background-color만 transition 적용하도록 하였다.

 

 

        .box2{
            transition-property: all;
            transition-duration: 3s;
        }

all으로 모든 속성에 적용할 수 있다.

 

 

 

transition-timing-function

시간함수로 transition의 진행 속도를 조절할 수 있다.

 

linear : 등속 / 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행된다.

ease : 점진적인 가속 / 기본값 / 전환(transition) 효과가 천천히 시작되어, 빨라지고, 다시 느려진다.

ease-in : 가속 / 전환(transition) 효과가 천천히 시작되어 빠르게 끝난다.

ease-out : 감속 / 전환(transition) 효과가 빠르게 시작되어 천천히 끝난다.

ease-in-out : 점직적인 가속 후에 감속 / 전환(transition) 효과가 천천히 시작되어, 빨라지다가 천천히 끝난다.

cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

 

 

 

transition-duration

효과가 반영되는 지속시간을 지정한다. transition이 시작되어 끝날 때까지 걸리는 시간을 정한다.

시간 단위는 초(s) 또는 1/1000초(ms)를 사용하고, 기본값은 0s이다.

 

 

 

 

transition-delay

transition이 시작하는 시점을 설정할 수 있게 해줄 수 있다. 

transition-duration 속성처럼  ms 또는 s 단위로 시간 단위를 설정한다.

기본값은 0s으로 이벤트가 발생하는 즉시 (지연없이) transition 효과가 일어난다.

time 값에 양수를 입력하면 해당 시간이 경과한 후에 전환 효과가 일어나게 되고, 음수값을 사용하면 즉시 전환 효과가 발생하면서 설정시간 만큼 애니메이션이 건너뛰어서 나타나게 된다. -2초를 지정하면 2초동안 진행된 상태부터 시작하는 것이다.