CSS steps() 함수

정의와 사용법

CSS의 steps() 이 함수는 애니메이션에 단계 시간 함수를 생성하는 데 사용됩니다.

이 함수는 애니메이션 지속 시간을 지정된 수량(n)의 동일한 길이의 간격으로 나눕니다. 예를 들어: n이 4라면 애니메이션을 4 부분으로 나눕니다. 0%에서 100%까지의 지속 시간을 4 부분으로 나눕니다; 각각 0%-25%、25%-50%、50%-75%와 75%-100%입니다.

예제

애니메이션에 다른 단계 시간 함수를 생성합니다：

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

개인적으로 시도해 보세요

CSS 문법

steps(n, step-position)
값 설명
n 필수 사항. 단계/간격을 지정합니다.
step-position

선택 사항. 값 사이에서 점프가 발생하는 시간을 지정합니다. 다음 중 하나의 키워드를 사용하세요：

  • jump-start 또는 start：애니메이션 시작 시 첫 번째 단계가 발생
  • jump-end 또는 end：애니메이션 끝에 마지막 단계가 발생합니다. 기본 값은 end입니다
  • jump-none：미리 또는 지연 점프가 발생하지 않음
  • jump-both：동시에 미리와 지연 점프가 발생

기술 세부 사항

버전： CSS Easing Functions Level 1

브라우저 지원

표에서의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge 파이어폭스 사파리 오페라
77 79 65 14 64

관련 페이지

참조:CSS animation 속성

참조:CSS animation-timing-function 속성