애니메이션의 여러 속성을 한번에 정의할 수 있도록 해주는 속기 속성이다.
<single-animation>#
<single-animation
> 설정 값을 콤마로 구분하여 하나 이상 작성할 수 있다. 즉, 요소에게 별개의 복수의 애니메이션을 동시에 설정할 수도 있다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
애니메이션에 관련된 속성들에 대한 일괄 정의된 값을 가지는 속기 속성이다. 주의할 점은 기본적으로 값의 순서는 무관하지만 <time>
값은 작성 순서에 따라 animation-duration
, animation-delay
순으로 값이 할당된다.
<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
각 속성을 생략하는 경우에는 기본값이 적용된다.
애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.
linear | <cubic-bezier-easing-function> | <step-easing-function>
3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.
ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
천천히 시작하다 빠르게 진행하며 천천히 종료한다.
천천히 효과를 시작한다.
천천히 효과를 시작하고 종료한다.
천천히 효과를 종료한다.
모든 함수를 표시하지 않을 수도 있다.
입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function>
일종이다.
step-start | step-end | steps(<integer>[, <step-position>]?)
<number-token>
유형 플래그가 'integer
'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
주어진 시간을 일정 간격으로 나누어서 애니메이션을 진행시 단계 위치를 지정하는 키워드를 나타낸다.
jump-start | jump-end | jump-none | jump-both | start | end
jump-end로 작동한다.
첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.
모든 상승은 (0, 1) 범위 내에서 발생한다.
마지막 상승은 입력 진행 값 1에서 발생한다.
첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.
jump-start로 작동한다.
steps(1, end)
로 계산한다.
steps(1, start)
로 계산한다.
모든 함수를 표시하지 않을 수도 있다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
모든 속성을 표시하지 않을 수도 있다.
설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.
animation-name
속성에 사용할 키프레임을 이름을 나타낸다.
<custom-ident> | <string>
임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.
normal | reverse | alternate | alternate-reverse
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.
none | forwards | backwards | both
웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.
웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.
애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.
애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.
애니메이션 주기가 재생되는 횟수를 지정한다. 기본 값은 1
이며 키프레임 처음부터 끝까지 한번 실행됨을 나타낸다.
infinite | <number>
애니메이션의 실행 또는 일시중지를 정의한다.
running | paused
애니메이션 동작을 일시 정지 시킨다.
기본값으로 애니메이션을 실행한다.
초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다. 밀리초(milliseconds)는 1/1000
초를 나타낸다.
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.
애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.
전이 효과의 동작을 지연시킨다.
전이효과가 지속되는 시간을 설정한다.
애니메이션으로 설정한 키프레임 셋을 제거한다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.
애니메이션 키프레임의 실행 순서를 설정한다.
애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.
키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.
애니메이션의 실행 횟수를 설정한다. 기본적으로 1회 실행한다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
애니메이션의 동작을 일시 정지와 실행으로 제어한다.
설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
필수 설정사항이다.
애니메이션 동작 시간을 초(s) 또는 밀리세컨드(ms)단위로 설정한다.
천천히 시작하다 빠르게 진행하며 천천히 종료한다.
애니메이션의 속도 변화를 설정한다.
애니메이션을 일정 시간 지연후 동작을 하고자 하는 경우에 지연 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다. 기본 값은 0
이다. 0
보다 큰 값을 설정해야만 애니메이션이 동작한다.
애니메이션을 얼마나 반복할 지를 설정한다. 기본 값은 1이다.
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.
애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.
기본값으로 애니메이션을 실행한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Animations Level 1 | 초안 작업 | Last review date: 2022-12-6 |