Properties

Properties

Editing
  • account_tree
  • bug_report

animation

애니메이션의 여러 속성을 한번에 정의할 수 있도록 해주는 속기 속성이다.

사용 가능한 값 타입

<'animation'>

DEVDIC-Specified Data Types

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

  • CSS Animations Level 1
    <single-animation>#

    <single-animation> 설정 값을 콤마로 구분하여 하나 이상 작성할 수 있다. 즉, 요소에게 별개의 복수의 애니메이션을 동시에 설정할 수도 있다.

포함된 타입

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

  • <single-animation>

    애니메이션에 관련된 속성들에 대한 일괄 정의된 값을 가지는 속기 속성이다. 주의할 점은 기본적으로 값의 순서는 무관하지만 <time> 값은 작성 순서에 따라 animation-durationanimation-delay 순으로 값이 할당된다.

    • CSS Animations Level 1DEVDIC-Specified Data Types
      <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

      각 속성을 생략하는 경우에는 기본값이 적용된다.

    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

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

    • <keyframes-name>

      animation-name 속성에 사용할 키프레임을 이름을 나타낸다.

      • CSS Animations Level 1
        <custom-ident> | <string>
      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

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

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."
        Details

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

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

        • font-family

          글꼴을 지정한다.

        • content

          가상 요소로 생성할 콘텐츠를 설정한다.

        • quotes

          인용 부호의 유형을 설정한다.

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

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

      • animation-name

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

    • <single-animation-direction>

      애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.

      • CSS Animations Level 1
        normal | reverse | alternate | alternate-reverse
      Details

      사용되는 키워드

      • alternate

        키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.

      • alternate-reverse

        키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.

      • normal

        키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.

      • reverse

        키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.

    • <single-animation-fill-mode>

      애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.

      • CSS Animations Level 1
        none | forwards | backwards | both
      Details

      사용되는 키워드

      • backwards

        웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.

      • both

        웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.

      • forwards

        애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.

      • none

        애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.

    • <single-animation-iteration-count>

      애니메이션 주기가 재생되는 횟수를 지정한다. 기본 값은 1이며 키프레임 처음부터 끝까지 한번 실행됨을 나타낸다.

      • CSS Animations Level 1
        infinite | <number>
      Details

      포함된 타입

      • <number>

        정수 또는 실수를 표현한다.

      사용되는 키워드

      • infinite

        무한대로 지정한다.

    • <single-animation-play-state>

       애니메이션의 실행 또는 일시중지를 정의한다.

      • CSS Animations Level 1
        running | paused
      Details

      사용되는 키워드

      • paused

        애니메이션 동작을 일시 정지 시킨다.

      • running

        기본값으로 애니메이션을 실행한다.

    • <time>

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

      Details

      사용되는 단위

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

      • ms

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

      • s

        초를 나타낸다.

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

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

      • animation-delay

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

      • animation-duration

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

      • transition-delay

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

      • transition-duration

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

    사용되는 키워드

    • none

      애니메이션으로 설정한 키프레임 셋을 제거한다.

속기에 사용되는 관련 속성

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

  • animation-delay

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

  • animation-direction

    애니메이션 키프레임의 실행 순서를 설정한다.

  • animation-duration

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

  • animation-fill-mode

    키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.

  • animation-iteration-count

    애니메이션의 실행 횟수를 설정한다. 기본적으로 1회 실행한다.

  • animation-name

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

  • animation-play-state

    애니메이션의 동작을 일시 정지와 실행으로 제어한다.

  • animation-timing-function

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

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS Animations Level 1

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

    필수 설정사항이다.

  • 〈time〉0s
    CSS Animations Level 1

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

  • CSS Easing Functions Level 1

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

    애니메이션의 속도 변화를 설정한다.

  • 〈time〉0
    CSS Animations Level 1

    애니메이션을 일정 시간 지연후 동작을 하고자 하는 경우에 지연 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다. 기본 값은 0이다. 0보다 큰 값을 설정해야만 애니메이션이 동작한다.

  • CSS Animations Level 1

    애니메이션을 얼마나 반복할 지를 설정한다. 기본 값은 1이다.

  • CSS Animations Level 1

    키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.

  • CSS Animations Level 1

    애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.

  • CSS Animations Level 1

    기본값으로 애니메이션을 실행한다.

예제

축약형 속성인 animation 속성으로 간단한 애니메이션 동작을 보여주고 있다.

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저