css transition 속성
오늘은 어떤 값의 변화가 일어날 때 일정 시간에 걸쳐 일어나게 할 수 있는 css의 속성인 transition에
대해 알아보도록 하겠습니다.
이 속성도 전 포스팅에서 다뤘던 line-height와 비슷하게 생각보다 세부 속성값으로 지정할 수 있는 것이
많습니다.
그래서 페이지를 꾸밀 때 그 속성값들에 대해 알고 있어야 하기에 세부 속성들을 하나씩 짚어 보고 마지막에
transition으로 전체 속성값을 지정해 보고 마무리 짓도록 하겠습니다.
| 속성값 | 설명 |
| transition-property | 어떤 변화를 일으킬 것인지 대상을 지정합니다. |
| transition-duration | 변화가 일어나는 지속 시간을 지정합니다. |
| transition-timing-function | 변화 흐름, 시간에 따른 변화 속도 등 일종의 변화 리듬을 지정합니다. |
| transition-delay | 변화의 대상이 바로 변화하지 않게 대기 시간을 지정해 줄 수 있습니다. |
그리고 transition으로 위 4가지 속성값 전부를 지정할 수 있습니다.
기본 개념은 이렇게 되고, 상세한 내용은 하나씩 예제 코드로 하나씩 살펴 보도록 하겠습니다.
1. transition-property, transition-duration
먼저 대상을 지정하는 property와 지속 시간을 결정하는 duration부터 해 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.trans {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="trans">
안녕하세요.
</div>
</body>
</html>
이렇게 일반적인 상태의 코드를 만들었습니다.
여기서 transition 속성값을 부여해서 마우스를 올렸을 때(:hover) 저 div 공간이 변화하게 해 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.trans {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
transition-property: width, height, background-color;
transition-duration: 4s, 1s, 2s;
}
.trans:hover {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="trans">
안녕하세요.
</div>
</body>
</html>
이렇게 실행시키고 div 영역에 마우스를 올려놓으면 우리가 설정한 값(width 300px, height 300px,
background-color yellow)으로 변하는 과정을 설정한 시간(duration)동안 변하는 것을 볼 수
있습니다.
여기서 duration값을 4s, 1s, 2s 3개를 줬는데 각각 property값에 1:1로 대응을 하게 됩니다.
이 예제로 설명드리자면 맨 처음의 4s값은 가로 길이(width)가 4초동안 변한다는 이야기이고,
뒤의 1s와 2s도 각각 height와 background-color의 변화 시간값을 의미합니다.
+
참고로 변화할 수 있는 css 속성은 한정적입니다.
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
background-color background-position
top left right bottom
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
opacity outline-color outline-offset outline-width
visibility z-index
그리고 transition으로 변화를 주게 되면 다른 레이아웃에게도 영향을 끼치기 때문에 변화되었을 때의
상황도 생각하여 잘 사용하시길 바랍니다.
2. transition-timing-function
위에서 변화 리듬을 지정하는 속성값이라고 설명했었는데, 세부 속성값과 예제를 통해 자세히
살펴 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
transition: height 2s;
}
div:nth-child(1) {
transition-timing-function: ease;
}
div:nth-child(2) {
transition-timing-function: linear;
}
div:nth-child(3) {
transition-timing-function: ease-in;
}
div:nth-child(4) {
transition-timing-function: ease-out;
}
div:nth-child(5) {
transition-timing-function: ease-in-out;
}
div:hover {
height: 300px;
}
</style>
</head>
<body>
<div>
안녕하세요.1
</div>
<div>
안녕하세요.2
</div>
<div>
안녕하세요.3
</div>
<div>
안녕하세요.4
</div>
<div>
안녕하세요.5
</div>
</body>
</html>
실행된 페이지에서 각각의 div 영역에 마우스를 올려 보시면 어떻게 변화 리듬이 달라지는지 눈으로
확인할 수 있습니다.
| 속성값 | 설명 |
| ease | 기본값으로, 느리게 시작하여 빨라지다가 느려지면서 끝납니다. |
| linear | 시작부터 종료까지 일정 속도로 움직입니다. |
| ease-in | 느리게 시작한 후 일정 속도에 다다르면 일정 속도로 움직입니다. |
| ease-out | 일정 속도로 시작해서 점점 느려지며 끝납니다. |
| ease-in-out | ease보다 전체적으로 속도는 느리지만 비슷한 움직임을 보여줍니다. |
이 설명을 기억하며, 위의 코드를 그대로 복사해 실행해 보면서 비교 확인해 보시면 더욱 쉽게 이해하실 수
있습니다.
(다음 포스팅에서는 메모장으로 간단하게 html 코드의 실행 결과를 보는 것에 대해서도 다루도록
하겠습니다.)
3. transition-delay
이 속성값은 위의 속성들보다는 간단합니다.
transition은 보통 사용자가 어떤 행동(hover, 체크박스 누름)을 했을 때를 기준으로 변화를 일으키는데
이 delay값을 주게 되면 delay값만큼 일정 시간이 지난 뒤에 변화가 시작됩니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
display: inline-block;
border: 1px solid black;
background-color: #CFFFE5;
width: 100px;
height: 100px;
transition: height 2s;
transition-delay: 1s;
}
div:hover {
height: 300px;
}
</style>
</head>
<body>
<div>
안녕하세요.1
</div>
</body>
</html>
이렇게 delay값을 1s로 주게 되면 마우스를 올린 후 1초 뒤에 우리가 설정한 변화가 일어나기 시작합니다.
오늘은 레이아웃에 다양한 변화를 줄 수 있는 transition 속성에 대해 알아봤습니다.
다만 transition으로 변화를 줄 시 다른 레이아웃에 끼칠 영향도 고려해야 하기에 그런 상황에 맞게
잘 사용하시길 바라면서 마무리 짓겠습니다.