Properties

Properties

Editing
  • account_tree
  • bug_report

transition

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

설명

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

사용 가능한 값 타입

〈'transition'〉

  • <single-transition>#
    CSS Transitons

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈single-transition〉

    • <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
      CSS Transitons

구문

  • transition all 0s ease 0s;CSS3

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

    축약성 속성을 이용한 간단한 전이효과 처리
  • object.style.transition = "all 1s";CSS3

    자바스크립트 형식

버전 명세

Modules
Module NameStatusSummary
CSS Transitons

Last review date: 2022-6-12

지원 웹브라우저