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 / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
CSS / border-style / 테두리 모양 정하는 속성
개요 border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-style border-right-style border-bottom-style border-left-style 문법 border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정한다. 기본값은 none이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성
개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...
CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성
개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...
CSS / white-space / 공백 처리 방법 정하는 속성
개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...
text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...
CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성
개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...