transition

정의 및 사용

transition 이란 단어의 뜻은 “다른 상태로의 변화”를 뜻한다. css3 에서 새로 생긴 transition 도 모양이나 색상의 변화를 시간을 두고 줄 수 있는 속성이다. transition-property, transition-duration, transition-timing-function, transition-delay 총 네 가지 속성의 축약으로 transition 하나를 사용할 수 있다.

정의 및 사용
기본값 all 0 ease 0
상속 no
버전 CSS3
자바스크립트 구문 object.style.transition=”width 2s”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE계열 외 모두 지원(각 브라우저 접두사를 사용해야 한다)

구문

속성

속성 값 설명
설명
transition-property transition 에 어떤 효과를 줄지 css 속성의 이름을 지정해주는 속성
transition-duration 변화되는 시간을 초단위로 지정해주는 속성
transition-timing-function 변화되어지는 시간동안 각 구간마다 빠르고 느림을 개별로 지정해주는 속성
transition-delay 변화가 언제 시작될지 지정해주는 속성

예제

버그 및 이슈

소제목

목록 으로

댓글