Properties

Properties

Editing
  • account_tree
  • bug_report

transition

요소에게 전이 효과에 관련된 속성을 한번에 정의하는 속기 속성이다.

설명

CSS에서의 전이 효과는 기본적으로 요소가 가지고 있는 특정 속성의 값에서 시간 차를 두고 바뀐 값으로 변화되는 모습을 애니메이션처럼 처리해준다. 따라서 CSS 애니메이션 처리에 사용되는 속성들 중에서 속성명이 다르지만 같은 의미의 속성이 일부 존재한다.

사용 가능한 값 타입

<'transition'>

DEVDIC-Specified Data Types

transition 속기 속성에 사용되는 타입이다.

  • CSS Transitons
    <single-transition>#

    한 개 이상의 <single-transition> 값을 콤마로 구분하여 전이 효과를 적용할 수 있다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <single-transition>

    하나의 전이(transitoin)효과를 적용하기 위해 정의된 관련 값을 나타낸다.

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

    포함된 타입

    • <'transition-delay'>

      DEVDIC-Specified Data Types

      transition-delay 속성에 사용되는 타입이다.

      • CSS Transitons
        <time>#
      Details

      포함된 타입

      • <time>

        초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다. 밀리초(milliseconds)는 1/1000초를 나타낸다.

        Details

        사용되는 단위

        아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

        • ms

          1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

        • s

          초를 나타낸다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • animation-delay

          애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.

        • animation-duration

          애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.

        • transition-delay

          전이 효과의 동작을 지연시킨다.

        • transition-duration

          전이효과가 지속되는 시간을 설정한다.

    • <'transition-duration'>

      DEVDIC-Specified Data Types

      transition-duration 속성에 사용되는 타입이다.

      • CSS Transitons
        <time>#
      Details

      포함된 타입

      • <time>

        초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다. 밀리초(milliseconds)는 1/1000초를 나타낸다.

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<time>]
    • <'transition-property'>

      DEVDIC-Specified Data Types

      transition-property 속성에 사용되는 타입이다.

      • CSS Transitons
        none | <single-transition-property>#
      Details

      포함된 타입

      • <single-transition-property>

        전이(transition) 효과를 적용할 대상 속성을 나타낸다.

        • CSS Transitons
          all | <custom-ident>
        Details

        포함된 타입

        • <custom-ident>

          임의의 사용자 정의 문자열을 나타낸다.

          Details

          동일한 타입을 사용하는 관련 속성

          모든 속성을 표시하지 않을 수도 있다.

          • animation-name

            애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

          • grid-column-end

            그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

          • grid-column-start

            그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

          • grid-row-end

            그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

          • grid-row-start

            그리드 항목이 시작될 행(row)의 위치를 정의한다.

          • counter-increment

            하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

          • counter-reset

            하나 이상의 CSS 카운터를 만들거나 재설정한다.

          • list-style-type

            목록의 마커의 모양을 설정한다.

        사용되는 키워드

        • all

          모든 애니메이션이 가능한 속성을 대상으로 한다.

      공통적으로 사용되는 값

      다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

      • none

        어떠한 값도 설정하지 않음을 나타낸다.

    • <'transition-timing-function'>

      DEVDIC-Specified Data Types

      transition-timing-function 속성에 사용되는 타입이다.

      • CSS Transitons
        <easing-function>#
      Details

      포함된 타입

      • <easing-function>

        애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.

        • CSS Animations Level 1
          linear | <cubic-bezier-easing-function> | <step-easing-function>
        Details

        포함된 타입

        • <cubic-bezier-easing-function>

          3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.

          • CSS Easing Functions Level 1
            ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
          Details

          사용되는 키워드

          • ease

            CSS Easing Functions Level 1

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

          • ease-in

            CSS Easing Functions Level 1

            천천히 효과를 시작한다.

          • ease-in-out

            CSS Easing Functions Level 1

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

          • ease-out

            CSS Easing Functions Level 1

            천천히 효과를 종료한다.

          관련 함수

          모든 함수를 표시하지 않을 수도 있다.

        • <step-easing-function>

          입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function> 일종이다.

          • CSS Easing Functions Level 1
            step-start | step-end | steps(<integer>[, <step-position>]?)
          Details

          포함된 타입

          • <integer>

            <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

            • [HYPHEN-MINUS]?[0-9]

              0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

            Details

            포함된 타입

            • <number-token>

              Number Token Railroad Diagrams

              + - digit . digit digit . digit e E + - digit
          • <step-position>

            주어진 시간을 일정 간격으로 나누어서 애니메이션을 진행시 단계 위치를 지정하는 키워드를 나타낸다.

            • CSS Easing Functions Level 1
              jump-start | jump-end | jump-none | jump-both | start | end
            Details

            사용되는 키워드

            • end

              jump-end로 작동한다.

            • jump-both

              첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.

            • jump-done

              모든 상승은 (0, 1) 범위 내에서 발생한다.

            • jump-end

              마지막 상승은 입력 진행 값 1에서 발생한다.

            • jump-start

              첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.

            • start

              jump-start로 작동한다.

          사용되는 키워드

          • step-end

            steps(1, end)로 계산한다.

          • step-start

            steps(1, start)로 계산한다.

          관련 함수

          모든 함수를 표시하지 않을 수도 있다.

        사용되는 키워드

        • linear

          CSS Easing Functions Level 1

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

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • animation-timing-function

          설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.

        • transition-timing-function

          주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.

구문

  • transition: all 0s ease 0s;
    CSS Transitons

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

    Example
  • transition: border-radius 0.5s, background-color 0.3s;
    CSS Transitons
    한 세트 이상의 값을 설정하는 샘플
  • element.style.transition = "all 1s";
    CSS Transitons

버전 명세

Modules
Module NameStatusSummary
CSS Transitons

Last review date: 2022-6-12

지원 웹브라우저