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>

같은 카테고리의 다른 글
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...

CSS / Flex / align-items

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 유튜브 동영상 반응형으로 삽입하는 방법

CSS / 유튜브 동영상 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / ul, ol 가운데 정렬하는 방법

CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...

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 / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / background-image / 배경 이미지 정하는 속성

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...