CSS Types

CSS Types

Editing

<easing-function>

애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.

구문

  • CSS Animations Level 1
    linear | <cubic-bezier-easing-function> | <step-easing-function>

사용되는 키워드

키워드요약
linear

설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.

관련 속성들

  • animation-timing-function설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
  • transition-timing-function주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.

사용되는 타입

  • <cubic-bezier-easing-function>3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.
  • <step-easing-function>입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function> 일종이다.

버전 명세

Modules
Module NameStatusSummary
CSS Easing Functions Level 1후보 추천 초안

어떤 값의 속도 변화를 제어하는 변환을 정의하는 방법을 설명한다.


Last review date: 2022-6-6

CSS Animations Level 1초안 작업

Last review date: 2022-12-6

©2024 devdic.com, Korea

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

master@cydemy.com