코드랩 레퍼런스

animation-timing-function 본문

CSS

animation-timing-function

webstoryboy 2016. 6. 13. 23:23

animation-timing-function 속성은 움직임의 속도를 정의합니다.
특징 설명
기본 값 ease
상속 안됨
애니메이션 안됨
버전 CSS3

Definition

  • animation-timing-function 속성은 움직임의 속도를 정의합니다.

Syntax

animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | inherit;

Property

속성 값 설명
linear 처음 속도와 마지막 속도가 일정합니다.
ease 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니다.
ease-in 천천히 시작되어 정상 속도가 됩니다.
ease-out 마지막에 천천히 속도를 줄여 끝납니다.
ease-in-out 천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.
step-start 애니메이션을 시작점에서만 표현됩니다.
step-end 애니메이션을 끝점에서만 표현됩니다.
steps(int,start|end) 애니메이션을 단계별로 설정합니다.
cubic-bezier(n,n,n,n) 베지어 곡선값을 만들어서 속도를 설정합니다.
inherit 애니메이션 움직임을 상위 요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
animation-timing-function

Sample1 클릭하면 이미지 움직임의 속도를 확인하는 예제입니다.

애니메이션(animation-timing-function)

timing
timing
timing
timing
timing
Click : 클릭하면 이미지가 움직입니다.

  • .list .timing1 {animation: move1 2s ease; animation-timing-function:linear;}
  • .list .timing2 {animation: move1 2s ease; animation-timing-function:ease;}
  • .list .timing3 {animation: move1 2s ease; animation-timing-function:ease-in;}
  • .list .timing4 {animation: move1 2s ease; animation-timing-function:ease-out;}
  • .list .timing5 {animation: move1 2s ease; animation-timing-function:ease-out-in;}
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			.list > div {width: 60px; height: 60px; background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); line-height: 60px; text-align: center; border-radius: 50%;font-size: 12px; color: #fff; margin: 10px; position: relative;}
			.list .timing1 {animation: move1 2s; animation-timing-function:linear;}
			.list .timing2 {animation: move1 2s; animation-timing-function:ease;}
			.list .timing3 {animation: move1 2s; animation-timing-function:ease-in;}
			.list .timing4 {animation: move1 2s; animation-timing-function:ease-out;}
			.list .timing5 {animation: move1 2s; animation-timing-function:ease-out-in;}

			@keyframes move1 {
				0% {left: 0%;}
				50% {left: calc(100% - 70px);}
				100% {left: 0%;}
			}
		</style>
	</head>
	<body>
		
		<h3 class="h3">애니메이션(animation-timing-function)</h3>
		<div class="list">
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
		</div>

		<div class="btn">
			<a href="#c" class="line">Click : 클릭하면 이미지가 움직입니다.</a><br><br>
			<ul>
				<li>.list .timing1 {animation: move1 2s ease; animation-timing-function:linear;}</li>
				<li>.list .timing2 {animation: move1 2s ease; animation-timing-function:ease;}</li>
				<li>.list .timing3 {animation: move1 2s ease; animation-timing-function:ease-in;}</li>
				<li>.list .timing4 {animation: move1 2s ease; animation-timing-function:ease-out;}</li>
				<li>.list .timing5 {animation: move1 2s ease; animation-timing-function:ease-out-in;}</li>
			</ul>
		</div>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(".btn a").click(function(){
				$(".list > div").eq(0).addClass("timing1");
				$(".list > div").eq(1).addClass("timing2");
				$(".list > div").eq(2).addClass("timing3");
				$(".list > div").eq(3).addClass("timing4");
				$(".list > div").eq(4).addClass("timing5");
			});
		</script>
	</body>
</html>

Sample2 클릭하면 이미지가 움직이는 단계를 확인하는 예제입니다.

애니메이션(animation-timing-function)

timing
timing
timing
timing
timing
timing
Click : 클릭하면 이미지가 움직입니다.

  • .list2 .timing6 {animation: move1 2s; animation-timing-function:step-start;}
  • .list2 .timing7 {animation: move1 2s; animation-timing-function:step-end;}
  • .list2 .timing8 {animation: move1 2s; animation-timing-function:steps(4, start);}
  • .list2 .timing9 {animation: move1 2s; animation-timing-function:steps(4, end);}
  • .list2 .timing10 {animation: move1 2s; animation-timing-function:steps(10, start);}
  • .list2 .timing11 {animation: move1 2s; animation-timing-function:steps(10, end);}
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			.list2 > div {width: 60px; height: 60px; background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); line-height: 60px; text-align: center; border-radius: 50%;font-size: 12px; color: #fff; margin: 10px; position: relative;}
			.list2 .timing6 {animation: move1 2s; animation-timing-function:step-start;}
			.list2 .timing7 {animation: move1 2s; animation-timing-function:step-end;}
			.list2 .timing8 {animation: move1 2s; animation-timing-function:steps(4, start);}
			.list2 .timing9 {animation: move1 2s; animation-timing-function:steps(4, end);}
			.list2 .timing10 {animation: move1 2s; animation-timing-function:steps(10, start);}
			.list2 .timing11 {animation: move1 2s; animation-timing-function:steps(10, end);}

			@keyframes move1 {
				0% {left: 0%;}
				50% {left: calc(100% - 70px);}
				100% {left: 0%;}
			}
		</style>
	</head>
	<body>
		
		<h3 class="h3">애니메이션(animation-timing-function)</h3>
		<div class="list2">
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
		</div>

		<div class="btn btn2">
			<a href="#c" class="line">Click : 클릭하면 이미지가 움직입니다.</a><br><br>
			<ul>
				<li>.list2 .timing6 {animation: move1 2s; animation-timing-function:step-start;}</li>
				<li>.list2 .timing7 {animation: move1 2s; animation-timing-function:step-end;}</li>
				<li>.list2 .timing8 {animation: move1 2s; animation-timing-function:steps(4, start);}</li>
				<li>.list2 .timing9 {animation: move1 2s; animation-timing-function:steps(4, end);}</li>
				<li>.list2 .timing10 {animation: move1 2s; animation-timing-function:steps(10, start);}</li>
				<li>.list2 .timing11 {animation: move1 2s; animation-timing-function:steps(10, end);}</li>
			</ul>
		</div>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(".btn2 a").click(function(){
				$(".list2 > div").eq(0).addClass("timing6");
				$(".list2 > div").eq(1).addClass("timing7");
				$(".list2 > div").eq(2).addClass("timing8");
				$(".list2 > div").eq(3).addClass("timing9");
				$(".list2 > div").eq(4).addClass("timing10");
				$(".list2 > div").eq(5).addClass("timing11");
			});
		</script>
	</body>
</html>

Sample2 클릭하면 이미지가 움직이는 단계를 확인하는 예제입니다.

애니메이션(animation-timing-function)

timing
timing
timing
timing
timing
Click : 클릭하면 이미지가 움직입니다.

  • .list3 .timing12 {animation: move1 2s; animation-timing-function:cubic-bezier(0,0,0,0);}
  • .list3 .timing13 {animation: move1 2s; animation-timing-function:cubic-bezier(1,0,0,1);}
  • .list3 .timing14 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.6, 0, 1.44);}
  • .list3 .timing15 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 1, 0.15);}
  • .list3 .timing16 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 0, 3.01);}
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			.list3 > div {width: 60px; height: 60px; background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); line-height: 60px; text-align: center; border-radius: 50%;font-size: 12px; color: #fff; margin: 10px; position: relative;}
			.list3 .timing12 {animation: move1 2s; animation-timing-function:cubic-bezier(0,0,0,0);}
			.list3 .timing13 {animation: move1 2s; animation-timing-function:cubic-bezier(1,0,0,1);}
			.list3 .timing14 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.6, 0, 1.44);}
			.list3 .timing15 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 1, 0.15);}
			.list3 .timing16 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 0, 3.01);}

			@keyframes move1 {
				0% {left: 0%;}
				50% {left: calc(100% - 70px);}
				100% {left: 0%;}
			}
		</style>
	</head>
	<body>
		
		<h3 class="h3">애니메이션(animation-timing-function)</h3>
		<div class="list3">
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
			<div>timing</div>
		</div>

		<div class="btn btn3">
			<a href="#c" class="line">Click : 클릭하면 이미지가 움직입니다.</a><br><br>
			<ul>
				<li>.list3 .timing12 {animation: move1 2s; animation-timing-function:cubic-bezier(0,0,0,0);}</li>
				<li>.list3 .timing13 {animation: move1 2s; animation-timing-function:cubic-bezier(1,0,0,1);}</li>
				<li>.list3 .timing14 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.6, 0, 1.44);}</li>
				<li>.list3 .timing15 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 1, 0.15);}</li>
				<li>.list3 .timing16 {animation: move1 2s; animation-timing-function:cubic-bezier(1,-0.62, 0, 3.01);}</li>
			</ul>
		</div>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(".btn3 a").click(function(){
				$(".list3 > div").eq(0).addClass("timing12");
				$(".list3 > div").eq(1).addClass("timing13");
				$(".list3 > div").eq(2).addClass("timing14");
				$(".list3 > div").eq(3).addClass("timing15");
				$(".list3 > div").eq(4).addClass("timing16");
			});
		</script>
	</body>
</html>


Share

Related Articles more
공유하기 링크

Ad

Comments