Properties

Properties

Draft
  • account_tree
  • bug_report

transition

요소에게 전이효과에 관련된 세부 속성을 한꺼번에 정의하여 전이효과를 실행한다.

설명

CSS에서의 전이효과는 기본적으로 가지고 있는 요소의 style에서 별도로 정의한 style로 변화되는 모습을 애니메이션처럼 처리해준다. 따라서 animation 속성과 같은 의미의 속성이 존재한다.

설정 가능한 속성 값

  • transition-property속성CSS3

    전이 효과를 적용할 CSS 속성을 정의한다. 기본 값은 all이다.

  • transition-duration속성CSS3

    전이 효과가 진행되는 시간을 초(s) 또는 밀리세컨드(ms) 단위로 지정한다. 기본 값은 0이다. 따라서 반드시 0보다 큰 값으로 설정해야 전이효과가 발생한다.

  • transition-timing-function속성CSS3

    지정된 시간 동안 전이 효과 진행되는 속도 변화를 지정한다. 기본 값은 ease이다.

  • transition-delay속성CSS3

    전이 효과 시작을 지연하는 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다. 기본 값은 0이다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • transition transition-property transition-duration transition-timing-function transition-delay;기본형식CSS3

    전이효과를 처리하는 세부 속성을 한번에 작성하여 전이효과를 설정한다. 각 세부 속성은 생략가능하며 생략된 경우에는 각 속성별 기본 값으로 처리된다.

  • transition all 0s ease 0s;기본값CSS3

    transition-duration 속성의 기본 값이 0s이므로 생략하면 전이효과가 나타나지 않는다. 다른 속성 값을 명시하지 않더라도 transition-duration 값만 0보다 큰 값으로 설정하면 기본적으로 전이효과가 만들어진다.

    축약성 속성을 이용한 간단한 전이효과 처리
  • object.style.transition = "all 1s";자바스크립트 형식CSS3

    자바스크립트 형식

지원 웹브라우저