Properties

Properties

Draft
  • account_tree
  • bug_report

transition-timing-function

주어진 시간 내에 전이효과를 어떠한 방식으로 진행(연출)할 지를 설정한다.

설정 가능한 속성 값

  • ease기본값키워드CSS3

    천천히 시작하다 빠르게 진행하며 천천히 종료한다.

  • linear키워드CSS3

    설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.

  • ease-in키워드CSS3

    천천히 효과를 시작한다.

  • ease-out키워드CSS3

    천천히 효과를 종료한다.

  • ease-in-out키워드CSS3

    천천히 효과를 시작하고 종료한다.

  • step-start키워드CSS3

    시작 단계와 동일하게 진행한다.

  • step-end키워드CSS3

    종료 단계와 동일하게 진행한다.

  • steps(int,startorend)함수CSS3

    두 개의 매개 변수를 이용하여 구간별 세밀하게 속도를 조정한다. 첫번째 매개 변수는 간격 수를 0보다 큰 정수로 설정하고 두번째 매개 변수는 'start' 또는 'end' 값 중에서 선택하며 속도 변경의 발생 지점을 설정한다.

  • cubic_bezier(n,n,n,n)함수CSS3

    베지어 곡선을 통한 속도 변화 설정이 가능하며 매개 변수로 지정될 값은 0에서 1사이의 값이다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • transition-time-function linear or ease or ease-in or eas-out or ease-in-out or step-start or step-end or steps() or cubic-bezier() or initial;기본형식CSS3

    주어진 상수를 이용해서 설정한다.

  • object.style.transitionTimingFunction = "linear";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

전이효과 속도 변화 설정 테스트

지원 웹브라우저