@keyframes

선언

• CSS Animations Level 1

  @keyframes <keyframes-name> { <keyframe-block-list> }

  <keyframe-block-list>는  오직 <keyframe-block>만 갖는 <rule-list>를 나타낸다.

포함된 타입

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

• <keyframe-block-list>

  DEVDIC-Specified Data Types

  하나 이상의 <keyframe-block>을 갖는 <rule-list>를 나타낸다.

  • CSS Animations Level 1

    <keyframe-block>{0,100}

    첫 번째 키프레임(0% 시작 또는 from)부터 최대 101(100% 까지 또는 to)개까지의 키프레임을 생성할 수 있다.

  Details

  포함된 타입

  • <keyframe-block>

    <keyframe-selector>와 { }  내부의 선언 목록을 갖는 구조를 나타낸다.

    • CSS Animations Level 1

      <keyframe-selector># { <declaration-list> }

      <declaration-list>는 애니메이션이 가능한 모든 CSS 속성을 허용한다. 그러나 캐스케이드(재정의와 상속 등)와는 상호작용하지 않는다. 따라서 !important는 유효하지 않으며 무시된다.

    Details

    포함된 타입

    • <declaration-list>

      선언 목록을 나타낸다. 문법에서 블록의 유일한 값으로만 사용할 수 있으며 선언 목록 처리 알고리즘을 사용하여 블록의 내용을 구문 분석해야 함을 나타낸다.

    • <keyframe-selector>

      쉼표로 구분된 백분율(0%~100%) 값 목록 또는 from과 to 키워드로 구성된 값을 나타낸다.

      <keyframe-selector>의 예

      @keyframes myani {
        from { }
        20%, 30% { }
        60% { }
        80% { }
        to { }
      }

       

      • CSS Animations Level 1

        from | to | <percentage [0,100]>

      Details

      포함된 타입

      • <percentage>

        어떠한 기준으로 부터 백분율로 표현한다.

      사용되는 키워드

      • from

        0%에 해당하는 <keyframe-selector>이다.

      • to

        100%에 해당하는 <keyframe-selector>이다.

• <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

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