CSS3 transition 속성

Internet Explorer 9 이전 버전의 브라우저는 transition 속성을 지원하지 않습니다.
transition은 네 개의 과도한 속성을 설정하는 데 사용되는 간략한 속성이다

transition-property

transition-duration

transition-timing-function

transition-delay

값
묘사
transition-property
변환 효과 설정 CSS 속성의 이름을 지정합니다.
transition-duration
전환 효과를 완료하는 데 몇 초 또는 밀리초 소요
transition-timing-function
속도 효과를 지정하는 속도 곡선
transition-delay
변환 효과가 언제 시작되는지 정의합니다.
주의: 항상transition-duration 속성을 지정합니다. 그렇지 않으면 지속 시간이 0이면transition은 아무런 효과가 없습니다.
코드 인스턴스

브라우저 지원
등록 정보
Chrome
IE
Firefox
safar
Opera
transition
-webkit-
-moz-
-webkit-
-o-
transition-property

transition-property: none | all | property;

4

none: 속성이 없으면 과도 효과를 얻습니다.

4

all: 모든 속성이 과도 효과를 얻습니다

4

property: 변환 효과를 적용할 CSS 속성 이름 목록을 쉼표로 구분합니다

transition-duration

transition-duration:time;

4

time: 과도 효과를 완성하는 데 걸리는 시간(초 또는 밀리초)을 규정한다.기본값은 0이며 효과가 없음을 의미합니다

transition-timing-function
이 속성은 지속 시간의 속도를 바꾸는 과도 효과를 허용합니다.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

값
묘사
linear
같은 속도로 시작해서 끝날 때의 과도 효과(cubic-bezier(0,0,1,1)를 규정한다.
ease
기본값;느린 속도로 시작해서 빨라지고 느린 속도로 끝나는 과도 효과(cubic-bezier(0.25,0.1,0.25,1)를 규정한다.
ease-in
느린 속도로 시작하는 과도 효과(cubic-bezier(0.42,0,1,1)를 규정한다.
ease-out
느린 속도로 끝나는 과도 효과(cubic-bezier(0,0,0.58,1)를 규정한다.
ease-in-out
느린 속도로 시작하고 끝내는 과도 효과(cubic-bezier(0.42,0,0.58,1)를 규정한다.
cubic-bezier(n,n,n,n)
cubic-bezier 함수에서 자신의 값을 정의합니다.가능한 값은 0에서 1 사이의 값입니다.
transition-delay
이 속성은 전환 효과를 언제 시작할지 지정합니다

transition-delay:time;(2s  2ms)

초 또는 밀리초 수를 지정하기 전에 전환 효과가 시작될 때까지 기다립니다.