트랜지션
트랜지션(transition)이란 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것 처럼 스타일 속성이 바뀌는 것을 말합니다.
- 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 트랜지션이라고 합니다.
| 속성 | 설명 |
|---|---|
| transition-property | 트랜지션 대상을 설정합니다. |
| transition-duration | 트랜지션 진행시간을 설정합니다. |
| transition-timing-fuction | 트랜지션 속도 곡선을 설정합니다. |
| transition-delay | 트랜지션 지연 시간을 설정합니다. |
| transition | 4개 속성을 한꺼번에 설정합니다. |
transition-property속성-트랜지션을 적용할 속성 지정하기
트랜지션을 만드는 첫 번째 단계는 트랜지션을 어느 속성에 적용할 것인지 선택하는 것입니다.
- transsition-property를 사용하지 않을 경우, 모든 속성이 트랜지션 대상이 되고 특정 속성이름을 입력하면 그 속성에 트랜지션이 적용 됩니다.
| 속성 값 | 설명 |
|---|---|
| all | all값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션의 대상이 됩니다.(기본값) |
| none | 트랜지션 동안 아무 속성도 바뀌지 않습니다. |
| <속성이름> | 트랜지션 효과를 적용할 속성 이름을 지정합니다. 예를들어 배경 색만 바꿀것인지,width값을 바꿀 것인지 원하는 대상만 골라서 지정할 수 있습니다. 속성이 여러개일 경우 쉼표(,)로 구분해 나열합니다. |
transition-duration속성-트랜지션 진행 시간 지정하기
트랜지션 대상을 지정했었다면 진행 시간을 지정해야 그 시간 동안 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있습니다.
- transition-duration속성,즉 트랜지션 진행 시간이 0초를 기본으로 설정 되었기 때문입니다.
- 이때 시간 단위는 초 또는 밀리초 입니다.
- 트랜지션 대상이 되는 속성이 여러 개라면 트랜지션 진행시간도 쉼표(,)로 구분해 순서대로 여러개를 지정할 수 있습니다.
정해진 시간 동안 높이와 너비 바꾸기
다음과 같이 요소의 너비와 높이에 트랜지션 시간을 다르게 지정해 높이 값은 1초안에 바뀌게 하고 너비 값은 2초동안 바뀌도록 할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.tr1 {
width: 100px;
height: 100px;
background-color: blue;
border: 4px solid black;
transition-property: width, height;
transition-duration: 100s, 100s;
}
.tr1:hover {
width:800px;
height:120px;
}
</style>
</head>
<body>
<div class="tr1"></div>
</body>
</html>
- 위의 예에서는 transition-property에서 지정한 속성의 개수와 transition-duration에서 지정한 시간의 개수가 같이 때문에 width속성은 2초동안,height속성은 1초 동안 트랜지션이 진행 되었습니다.
- 하지만 transition-property에서 지정한 속성의 개수와 transition-duration에서 지정한 시간의 개수가 일치하지 않다면?
- 예를들어 transition-property속성에서 background-color,transform,width,height와 같이 4개를 지정했는데 transtion-duration속성에 2s,3s처럼 2개만 지정했다면 어떻게 될까?
- 이럴 떄는 처음2개 속성 background-color,transform에 2s,3s가 적용되고 남은 2개 width,height 2s,3s가 반복전용됩니다.
정해진 시간 동안 배경 색과 회전,높이,너비 바꾸기
빨간색 작은 사각형 위로 마우스 포인터를 올려놓으면 배경 색의 회전,크기 변경까지 4가지 속성이 모두 바뀌는 트랜지션이 실행되는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
h1 {
text-align:center;
font-size:52px;
}
.tr1 {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
transition-property: background-color, transform, width, height;
transition-duration: 2s, 3s;
}
.tr1:hover {
width: 200px;
height: 200px;
background-color: #ff6e5f;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="tr1"><h1>!</h1> </div>
</body>
</html>
transition-timing-function속성-트랜지션 속도 곡선 지정하기
지금까지 배운 속성으로 트랜지션을 실행할 때 속도 변화를 지정하지 않았는데 처음에는 천천히 시작해 점점 빨라지더가 마지막에는 다시 느려진 것을 볼수 있었습니다.
- transition-timing-fuction속성을 사용하면 시작과 중간, 끝에서의 속도를 지정해 속도곡선을 만들 수 있습니다.
- 속도 곡선은 미리 정해진 키워드나 '베지에 곡선'을 이용해 표현합니다.
| 속성 값 | 설명 |
|---|---|
| linear | 시작부터 끝까지 똑같은 속도로 트랜지션을 진행합니다. |
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냅니다.(기본값) |
| ease-in | 시작을 느리게 합니다. |
| ease-out | 느리게 끝냅니다. |
| ease-in-out | 느리게 시작하고 느리게 끝냅니다. |
| cubic-bezier(n,n,n,n) | 배지에 함수를 직접 정의해 사용합니다.n에서 사용할 수 있는 값은 0~1입니다. |
transition-delay속성-지연 시간 설정하기
transition-delay속성은 트랜지션이 언제부터 시작할 것인지를 설정합니다.
- 이속성에서 지정하는 시간만큼 기다렸다가 트랜지션이 시작됩니다.
- 사용할 수 있는 값은 초나 밀리초이며 기본값은 0s 입니다.
특정 시간 후에 트랜지션 실행하기
첫번째 상자는 지연 시간 없이 트랜지션을 실행하고 두번쨰 상자에는 1초 동안 지연 시간을 두고 트랜지션을 실행해 비교한 것입니다.
화면의 사각 영역 위로 마우스 포인터를 올려놓으면 첫 번쨰 사각형이 회전을 시작하고 1초후 두번쨰 사각형이 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transition timing function</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
#ex {
position: relative;
width: 700px;
height: 150px;
margin: 0 auto;
border: 1px solid #aaa;
border-radius: 50px;
padding: 30px;
}
#ex:hover .box{
transform:rotate(720deg);
margin-left:700px;
}
.box {
font-size:15px;
position:relative;
width:60px;
height:60px;
margin-bottom:15px;
background-color:#eee;
}
.box p {
text-align: center;
padding-top: 6px;
}
#no-delay {
transition-duration: 3s;
border: 1px solid #ff6a00;
}
#delay {
transition-duration: 3s;
transition-delay: 1s;
border: 1px solid #006aff;
}
</style>
</head>
<body>
<div id="ex">
<div id="no-delay" class="box"> <p>no-delay</p> </div>
<div id="delay" class="box"> <p>delay</p> </div>
</div>
</body>
</html>
transition속성-트랜지션 속성 한번에 표기하기
- 트랜지션 적용 대상이 전체이고 트랜지션 실행 시간이 대상별로 다르지 않다면 transition속성으로 한꺼번에 지정하는 것이 편리합니다.
- transition속성 값의 나열 순서는 다음 순서를 따라야 합니다.만약 4개의 속성중 빠진 것이 있따면 그속성의 기본값을 사용합니다.
<style>
transition: <transition-property 값> | <transition-duration> | <transition-timing-function> | <transition-delay>
</style>transition속성 한꺼번에 표기하기
다음 소스는 2초 동안 ease-in트랜지션을 실행한 것이빈다.트랜지션 대상을 지정하지 않았으므로 기본값인 all이 적용되어 CSS에서 지정한 모든 속성,즉 여기서는 width와 height,background-color,transform이 트랜지션의 대상이 됩니다.
(사각형 위로 마우스 포인터를 올려 놓으면 270도 회전하면서 너비와 높이 값이 줄어들고 배경 색도 바뀝니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.tr1 {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
transition: 2s ease-in;
}
.tr1:hover {
width: 100px;
height: 100px;
background-color: #ff6e5f;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="tr1"></div>
</body>
</html>- transition-property: 기본값 all
- transition-duration:2s
- transition-timing-function:ease-in
- transition-delay: 기본 값 0
블로그 이전합니다! https://jyyoun1022.tistory.com/