[css] transition 속성

transition

모든 transtion 속성을 한 번에 사용한다.

[transition 단축 문법]

• transition :(property) (duration) (timin-function) (delay);

transition-delay

이벤트 발생 후 몇 초 후에 재생할지 지정한다

transition-duration

몇 초 동안 재생할지 지정한다.

transition-property

어떤 속성을 변형할지 지정한다.

[transition-property 속성 값]

• all - {transition: all 3s;}모든 속성 값에 전환 효과를 추가한다.
• 한 가지 속성 값만 추가 할 경우 - {transition : width 2s ;} 
• 여러 가지 속성 값 추가 할 경우 - {transiotn :width 3s, height:6s;} "," 콤마로 구분해서 넣어 준다.

 

transition-timing-function

전환 효과의 속도 곡선을 지정

[transition-timin-function 속성 값]

• ease -느린 시작, 빠른, 천천히 종료하는 전환 효과 (기본값).
• linear -시작부터 끝까지 동일한 속도로 전환 효과
• ease-in -느린 시작으로 전환 효과
• ease-out -느린 끝으로 전환 효과
• ease-in-out -느린 시작과 끝으로 전환 효과
• cubic-bezier(n,n,n,n) -cubic-bezier 함수에서 자신의 값을 정의 할 수 있다.

 

 

 

See the Pen transition by onion (@saetmlda) on CodePen.