CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

transition

  • transition은 속성을 서서히 변화시키는 속성입니다.
  • transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다.
  • IE는 버전 10부터 지원합니다.

문법

transition: property timing-function duration delay | initial | inherit
  • property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요.
  • timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요.
  • duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요.
  • delay : transition의 시작을 연기합니다. transition-delay를 참고하세요.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 원이 큰 사각형으로 바뀌고, 배경색도 변합니다.
  • 체크박스의 체크를 해제하면 원래 모양으로 돌아옵니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				border-radius: 100%;
				transition: all ease 2s 0s;
			}
			input:checked ~ .jb {
				width: 100%;
				height: 200px;
				border-radius: 0;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<div class="jb"></div>
	</body>
</html>

transition-property

  • transition-property로 transition이 적용될 속성을 정합니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-property: none | all | property | initial | inherit
  • none : 모든 속성에 적용하지 않습니다.
  • all : 모든 속성에 적용합니다.
  • property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 width, border-radius, background-color의 속성 값이 바뀝니다.
  • 첫 번째 박스는 모든 속성에 애니메이션 효과가 적용됩니다.
  • 두 번째 박스는 width와 background-color에만 애니메이션 효과가 적용됩니다. border-radius는 체크하자마자 적용됩니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
				border-radius: 20px;
				background-color: red;
			}
			.jb1 {
				transition-property: all;
			}
			.jb2 {
				transition-property: width, background-color;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-property: all</p>
		<div class="jb jb1"></div>
		<p>transition-property: width, background-color</p>
		<div class="jb jb2"></div>
	</body>
</html>

transition-timing-function

  • transition-timing-function으로 transition의 진행 속도를 조절할 수 있습니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit;
  • 기본값은 ease입니다.
  • ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다.
  • linear : cubic-bezier( 0, 0, 1, 1 )과 같습니다.
  • ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같습니다.
  • ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같습니다.
  • ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같습니다.
  • step-start : steps( 1, start )와 같습니다.
  • step-end : steps( 1, end )와 같습니다.
  • steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
  • cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

  • ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end를 비교하는 예제입니다.
  • 체크박스에 체크하면 애니메이션이 시작되고, 체크를 해제하면 원래대로 돌아옵니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				width: 16px;
				height: 16px;
				margin: 10px 0px;
				background-color: orange;
				transition-property: all;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-timing-function: ease;
			}
			.jb2 {
				transition-timing-function: linear;
			}
			.jb3 {
				transition-timing-function: ease-in;
			}
			.jb4 {
				transition-timing-function: ease-out;
			}
			.jb5 {
				transition-timing-function: ease-in-out;
			}
			.jb6 {
				transition-timing-function: step-start;
			}
			.jb7 {
				transition-timing-function: step-end;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>ease</p>
		<div class="jb jb1"></div>
		<p>linear</p>
		<div class="jb jb2"></div>
		<p>ease-in</p>
		<div class="jb jb3"></div>
		<p>ease-out</p>
		<div class="jb jb4"></div>
		<p>ease-in-out</p>
		<div class="jb jb5"></div>
		<p>step-start</p>
		<div class="jb jb6"></div>
		<p>step-end</p>
		<div class="jb jb7"></div>
	</body>
</html>

예제 2

  • steps( n, start|end )를 이용하여 4단계로 나누어 변화시키는 예제입니다.
  • start로 설정한 경우 각 단계를 시작할 때, end로 설정한 경우 각 단계가 끝날 때 변화시킵니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: boerder-box;
				width: 16px;
				height: 16px;
				margin: 10px 0px;
				background-color: orange;
				transition-property: all;
				transition-duration: 4s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-timing-function: steps( 4 );
			}
			.jb2 {
				transition-timing-function: steps( 4, end );
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>steps( 4, start )</p>
		<div class="jb jb1"></div>
		<p>steps( 4, end )</p>
		<div class="jb jb2"></div>
	</body>
</html>

cubic-bezier( n, n, n, n )

  • cubic-bezier( n, n, n, n )를 사용할 때 n에 들어갈 값은 http://cubic-bezier.com에서 찾을 수 있습니다.
  • 점을 움직여서 원하는 커브를 만들고, 상단에 있는 수를 사용합니다.

transition-duration

  • transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-duration: time| initial | inherit
  • 기본값은 0s입니다.
  • 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 박스가 커집니다.
  • 첫 번째 박스는 다 커지는데 1초가 걸립니다.
  • 두 번째 박스는 다 커지는데 0.4초가 걸립니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-duration: 1s;
			}
			.jb2 {
				transition-duration: 400ms;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-duration: 1s;</p>
		<div class="jb jb1"></div>
		<p>transition-duration: 400ms;</p>
		<div class="jb jb2"></div>
	</body>
</html>

transition-delay

  • transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다.
  • IE는 버전 10부터 지원합니다.

문법

transition-delay: time| initial | inherit
  • 기본값은 0s입니다.
  • 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다.
  • 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다.
  • 두 번째 박스는 1초 대기 후 커집니다. 즉, 박스가 커지는데 2초가 걸립니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
			.jb {
				box-sizing: border-box;
				width: 64px;
				height: 64px;
				margin: 10px 0px;
				background-color: orange;
				transition-duration: 1s;
			}
			input:checked ~ .jb {
				width: 100%;
			}
			.jb1 {
				transition-delay: 0.5s;
			}
			.jb2 {
				transition-delay: 1s;
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<p>transition-delay: 0.5s;</p>
		<div class="jb jb1"></div>
		<p>transition-delay: 1s;</p>
		<div class="jb jb2"></div>
	</body>
</html>

Related Posts

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...

CSS / 세로 가운데 정렬하는 방법

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...

CSS / font-weight / 글자 굵기 정하는 속성

CSS / font-weight / 글자 굵기 정하는 속성

개요 font-weight로 글자의 굵기를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : ...

CSS / Grid / 실전 예제

CSS / Grid / 실전 예제

높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS 강좌