CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 backface-visibility 속성 CSS3 animation-play-state 속성

CSS3 animation-timing-function 속성 사용 방법 및 예제

CSS3 animation-timing-function 속성은 CSS 애니메이션의 각 주기 내에서 어떻게 진행되어야 하는지 지정합니다。

다음 표는 이 속성의 사용 상황과 버전 기록을 요약합니다。

기본 값:	ease
적용됨:	모든 요소::before와::after 퍼셉션 요소
thừa kế:	없음
애니메이션 가능:	아니요。참조할 것 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.animationTimingFunction="linear"

animation-timing-function 사용 문법

이 속성의 문법은 다음과 같습니다：

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

다음 예제는 animation을 사용하는 방법을 보여줍니다.-timing-function 속성.

예제

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-timing-function:　ease-in;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-timing-function:　ease-in;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

테스트를 해보세요‹/›

속성 값

다음 표는 이 속성의 값을 설명합니다。

값	설명
linear	애니메이션이 초기 상태에서 최종 상태로 일정한 속도로 이동하는 경우를 지정합니다.
ease	渐入渐出와 유사하지만, 시작 부분에서 더 빠르게 가속하고, 중간 부분에서 이미 감속하기 시작합니다.
ease-in	애니메이션이 느리게 시작하고, 점차 가속하여 최종 상태에 도달한 후 애니메이션이 갑자기 멈춘 경우를 지정합니다.
ease-out	애니메이션이 빠르게 시작하고, 점차 최종 상태에 접근할 때부터 느리게 됩니다.
ease-in-out	애니메이션이 점차 최종 상태에 접근할 때부터 느리게 시작하고, 가속하고, 감속하는 경우를 지정합니다.
`cubic-bezier(n,n,n,n)`	삼차 베제르 커브 정의. 또는 속도 곡선. 가능한 값은 0에서1간의 수치.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 그 부모 요소의 animation을 사용합니다.-timing-function 속성의 계산 값.

브라우저 호환성

animation-timing-function 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 5+ ^-moz-，15 + 구글 크롬 4+ ^-webkit- 인터넷 익스플로러 10+ 애플 사파리 4+ ^-webkit- 오페라 12+ ^-o-，15+ ^-webkit-

더 읽어보기

다음 튜토리얼을 참조하세요：CSS3애니메이션。

CSS3 backface-visibility 속성 CSS3 animation-play-state 속성