속성을 서서히 변화시키는 속성

CSS
Created 2018-11-06 Last Modified 2021-02-16

1 transition
2 transition-property
3 transition-timing-function
4 transition-duration
5 transition-delay

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

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...

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

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

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / 링크 꾸미기

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

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 배경색만 투명하게 만들기

배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성