요소에게 전이 효과에 관련된 속성을 한번에 정의하는 속기 속성이다.
CSS에서의 전이 효과는 기본적으로 요소가 가지고 있는 특정 속성의 값에서 시간 차를 두고 바뀐 값으로 변화되는 모습을 애니메이션처럼 처리해준다. 따라서 CSS 애니메이션 처리에 사용되는 속성들 중에서 속성명이 다르지만 같은 의미의 속성이 일부 존재한다.
<single-transition>#
한 개 이상의 <single-transition>
값을 콤마로 구분하여 전이 효과를 적용할 수 있다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
하나의 전이(transitoin)효과를 적용하기 위해 정의된 관련 값을 나타낸다.
<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
<time>#
초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다. 밀리초(milliseconds)는 1/1000
초를 나타낸다.
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.
애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.
전이 효과의 동작을 지연시킨다.
전이효과가 지속되는 시간을 설정한다.
<time>#
none | <single-transition-property>#
전이(transition
) 효과를 적용할 대상 속성을 나타낸다.
all | <custom-ident>
임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
모든 애니메이션이 가능한 속성을 대상으로 한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
<easing-function>#
애니메이션 중 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)
로 계산한다.
모든 함수를 표시하지 않을 수도 있다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
모든 속성을 표시하지 않을 수도 있다.
설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.
transition: all 0s ease 0s;
transition-duration
속성의 기본 값이 0s
이므로 생략하면 전이효과가 나타나지 않는다. 다른 속성 값을 명시하지 않더라도 transition-duration
값만 0
보다 큰 값으로 설정하면 기본적으로 전이효과가 만들어진다.
transition: border-radius 0.5s, background-color 0.3s;
element.style.transition = "all 1s";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Transitons | Last review date: 2022-6-12 |