Transition

속성

transition-property

요소에 지정된 속성을 변환하고자 할 때 사용하는 속성

속성 값으로 특정 CSS 속성을 지정하면 해당 속성만 변환되고, all을 지정할 경우 요소에 지정된 모든 속성이 변환된다. 2개 이상의 속성을 지정할 경우 콤마(,)로 구분하면 여러 개를 지정할 수 있다.

div {
 margin-bottom : 20px ;
 width : 100px ;
 height : 50px ;
 padding : 10px ;
 line-height : 50px ;
 font-weight : bold ;
 color : #fff ;
 border : #ccc solid 5px ;
 background : rgba(5,77,74,1) ;
}
div:hover p {
 width : 400px;
 background : rgba(255,100,0,0.8) ;
 transition-duration : 3s ;
}
div p { transition-property : all ; }
div p { transition-property : background ; }

transition-duration

변환이 진행되는 시간을 지정하는 속성

transition-property 속성 값을 콤마로 구분하여 여러 개로 지정했을 경우, transition-duration 속성도 콤마로 구분해서 변화되는 속성 별로 시간을 지정할 수 있다.

/* 예시 */
div {
 margin-bottom : 20px;
 width : 100px ;
 height : 50px ;
 padding : 10px ;
 line-height : 50px ;
 font-weight : bold ;
 color : #fff ;
 border : #ccc solid 5px ;
 background : rgba(5,77,74,1) ;
}
div:hover div {
 width : 400px ;
 background : rgba(255,100,0,0.8) ;
 transition-property : all, background ;
}
div p { transition-duration : 3s ; }
div p { transition-duration : 5s, 7s ; }

transition-delay

변환이 진행되기 전 지연되는 시간을 지정하는 속성

/* 예시 */
div {
 transition-duration : 5s ;
 transition-delay : 2s ;
}

transition-timing-function

속성이 변환될 때 진행 속도의 형태를 지정하는 속성

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• steps
• cubic-bezier()

/* 예시 */
div { transition-timing-function : ease-in-out ; }
div { transition-timing-function : steps(4, start) ; }
div { transition-timing-function : cubic-bezier(0,1.59,1,-0.75) ; }

transition

/* 예시 */
div {
transition : all 3s ease-in 2s ;
}