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 / 링크 꾸미기

CSS / 링크 꾸미기

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

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

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 / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / linear-gradient - 선형 그라데이션 효과 만들기

CSS / linear-gradient - 선형 그라데이션 효과 만들기

linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS 강좌