1. 트랜지션이란?
수도 클래스와의 조합으로 코드가 작성되고,
웹 요소의 배경 색, 테두리, 형태 등의 스타일이 바뀌는 것을 의미한다.
수도 클래스와 함께 쓰여야 하기 때문에 사용자 반응이 필수적으로 있어야 한다.
2. transition-property 속성 : 트랜지션을 적용할 속성 지정하기
transition-property : all | none | <속성 명>
1️⃣ all : 기본값으로, 요소의 모든 속성이 트랜지션의 대상이 된다.
2️⃣ none : 트랜지션이 적용되는 동안에 아무 속성도 영향을 받지 않는다.
3️⃣ <속성 명> : 트랜지션이 적용될 특정 속성을 지정한다. 지정할 속성이 여러 개인 경우 쉼표(,)로 구분한다.
3. transition-duration 속성 : 트랜지션 진행 시간 지정하기
transition-duration : <시간>
트랜지션이 얼마 동안 진행할 것인지에 대한 시간을 지정한다.
기본은 0s 로 트랜지션 대상 속성이 여러 개인 경우 한 속성당 시간을 개별적으로 지정할 수도 있으며 이는 property 속성 때와 동일하게 쉼표로 구분하여 사용한다.
시간 단위는 초(s) 또는 밀리초(ms) 이다.
다음과 있는 예시를 만들어보자.
<style>
.transition {
width: 100px;
height: 100px;
background-color: cornflowerblue;
transition-property: width, height;
transition-duration: 5s, 1s;
}
.transition:hover {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
코드를 해석해보자.
트랜지션의 대상이 되는 속성은 너비와 높이로 지정하였다.
트랜지션의 진행되는 시간은 속성에 따라 지정하였고, 너비는 3초, 높이는 1초로 지정하였다.
즉 너비가 hover 시에 200px 의 크기가 될 때까지 3초라는 시간이 걸린다는 것이고,
높이는 300px 의 크기가 될 때까지 1초라는 시간이 걸린다는 것이다.
이는 hover 상태 해제를 할 때에 원본 이미지 형태로 돌아가려고 할 때에도 똑같이 적용되는 시간이다.
📌 duration 적용 순서
만약 다음과 같이 속성과 시간을 주면 어떻게 될까?
transition-property : background-color, transform, width, height;
transition-duration : 2s, 3s;background-color 속성에는 2초, transform 속성에는 3초, width 속성에는 다시 2초, height 속성에는 다시 3초가 적용된다.
즉, 번갈아서 시간이 적용된다.
만약 위의 코드의 속성의 개수가 홀수로 끝났다면 마지막 속성은 다시 2초가 되는 것이다.
4. transition-timing-function 속성 : 트랜지션 속도 곡선 지정하기
transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x, y, x, y)
1️⃣ linear : 시작부터 끝까지 똑같은 속도로 트랜지션을 진행한다. (시간과 진행율이 정비례)
2️⃣ ease : 기본값으로, 처음에는 천천히 시작하다가 중간에 빨라지고, 마지막에는 천천히 끝낸다.
3️⃣ ease-in : 시작을 느리게 한다.
4️⃣ ease-out : 끝을 느리게 한다.
5️⃣ ease-in-out : 느리게 시작하고 느리게 끝낸다.
6️⃣ cubic-bezier(x, y, x, y) : 베지에 함수를 직접 정의해서 사용한다.
기본적으로 6번을 제외한 곡선은 다음과 같다.
x 축이 시간을 나타내고, y 축이 트랜지션의 진행율을 나타낸다.
cubic-bezier 은 곡선의 지점을 임의로 지정할 수 있다.
하지만 그 지정이 다소 어려울 수 있기 때문에 관련 사이트를 이용하는 것도 하나의 방법이 될 수 있다.
https://cubic-bezier.com/
위의 사이트에 들어가게 되면 다음과 같은 화면을 볼 수 있다.
민트색으로 표시된 곡선이 비교하고자 하는 대상이 되는 것이고,
분홍색으로 표시된 곡선이 내가 만들고자 하는 곡선이 되는 것이다.
그래프 내의 각 지점(동그라미)을 움직여 원하는 모양을 만들고
[GO!] 버튼을 눌러 기존의 대상 곡선과의 시간적인 차이에 따른 속도를 확인할 수 있다.
이 때 진행율에 관해서는 음수 값 그리고 100% 이후의 값도 허용을 하는데
음수 값일 때에는 트랜지션을 시작할 때에 좀 더 뒤로 갔다가 시작하게 되고,
100%를 넘는 값일 때에는 마지막에 더 앞으로 갔다가 끝내게 된다.
만약 다음 코드를 실행해보면
<style>
.transition {
width: 100px;
height: 100px;
background-color: cornflowerblue;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: cubic-bezier(.51,-0.62,.57,1.75);
}
.transition:hover {
background-color: coral;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>처음은 원래 지정한 색생보다도 연한 색에서 시작했다가 코랄 색상으로 넘어가면서 더 진한 색이 되었다가 다시 코랄 색상이 되는 것을 확인할 수 있다.
5. trasition-delay : 지연 시간 설정하기
trasition-delay : <시간>
해당 속성은 지정한 시간만큼 트랜지션이 시작하는 시간을 늦추는 것이다.
기본값은 0 이며, duration 속성과 마찬가지로 초 또는 밀리초를 단위로 사용한다.
트랜지션은 어느 정도 지연 시간을 주고 시작하는 것이 자연스럽기 때문에 자주 사용되는 속성이다.
📌 트랜지션 속성 표기
이들을 한꺼번에 표기할 때에는 순서가 중요하다.
transition : <transition-property> | <transition-duration> | <transition-timing-function> | <transition-delay>
만약 해당 순번에 작성을 하지 않으면 그 속성의 기본값이 적용된다.
'CSS' 카테고리의 다른 글
| CSS Diner : selector 연습하기 (1 ~ 10번) (0) | 2022.10.30 |
|---|---|
| 애니메이션 (0) | 2022.10.28 |
| transform : 변형 (0) | 2022.10.28 |
| 가상 클래스와 가상 요소 (0) | 2022.10.26 |
| 속성 선택자 (0) | 2022.10.26 |
