CSS Types

CSS Types

Editing

<'animation'>

데브딕에서 지정한 색인용 자료 타입

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

구문

  • CSS Animations Level 1
    <single-animation>#

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

관련 속성들

  • 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설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.

사용되는 타입

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

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com