transition-timing-function

정의 및 사용

transition-timing-function 은 요소가 변화되는 동안 각 구간별로 변화의 진행 속도를 빠르거나 느리게 개별적으로 지정할 수 있는 속성이다. cubic-bezier 값으로 직접 속도 변화를 지정할 수 있고 미리 정해진 값 5개(linear, ease, ease-in, ease-out, ease-in-out)를 사용해도 된다.

정의 및 사용
기본값 ease
상속 no
버전 CSS3
자바스크립트 구문 object.style.transitionTimingFunction=”linear”

브라우저 지원

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

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

구문

속성

속성 값 설명
설명
linear 처음과 끝이 같은 속도로 변화 ( cubic-bezier(0.0, 0.0, 1.0, 1.0) )
ease 기본값. 변화되는 중간 지점이 처음과 끝보다 약간 빠른 속도 ( cubic-bezier(0.25, 0.1, 0.25, 1.0) )
ease-in 변화가 시작지점에서 천천히 진행되는 값 ( cubic-bezier(0.42, 0, 1.0, 1.0) )
ease-out 변화가 끝지점에서 천천히 진행되는 값 ( cubic-bezier(0, 0, 0.58, 1.0) )
ease-in-out 변화가 시작과 끝에서 모두 천천히 진행되는 값 ( cubic-bezier(0.42, 0, 0.58, 1.0) )
cubic-bezier(n,n,n,n) 직접 값을 입력해서 속도를 지정

예제

버그 및 이슈

cubic-bezier(n,n,n,n)

  • 첫째. xy축이 존재하는 좌표그래프에서 총 4개의 좌표점이 있고 그 각각을 p0, p1, p2, p3 이라고 한다.
  • 둘째. p0(0,0) 이고 p4(1,1) 로써 기본적으로 고정되어 있으며 cubic-bezier 의 4개의 n 값은 차례대로 p2 와 p3 의 x좌표, y좌표 값이 되는 것이다.
  • (예) cubic-bezier(0.42, 0, 0.58, 1.0) = p2(0.42, 0), p3(0.58, 1.0)
  • 셋째. 위 예제처럼 p2 와 p3 의 x, y 좌표점를 그래프에 찍고 기본적으로 주어진 p0 과 p3 의 좌표점까지 총4개의 지점을 베지어 곡선으로 연결하면 곡선 그래프가 나오며 그 곡선 그래프의 기울기에 따라 속도가 지정되는 것이다.
  • *참고* 베지어 곡선을 그리는 법은 추후 업데이트

소제목

목록 으로

댓글