🌝 transition 이란,,
hover선택자 만으로는 애니메이션 효과가 밋밋할 수 있는데, 밋밋함에 디테일을 넣어주는 속성이transition이다.hover가 아니라 트리거가 될 클래스에 지정해준다.hover라는 특수 입력 값이 없으면 아무런 반응이 나타나지 않는다.
🌝 transition 속성 정리
- transition : 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성. 아래 속성들을 한 번에 처리하는 속기법
- transition-delay : 변화되는 시간을 지연시키는 속성. transition-delay: 1s; => 1초 지연
- transition-duration : 변화되는 시간을 작성하는 속성 transition-duration: 1s; => 초단위
- transition-property : 변화되는 CSS를 구분하여 따로 처리
- transition-timing-function : 변화되는 시간에 ease(가속감속) 처리
1️⃣ transition-delay
- transition 효과를 지연시키는 속성
- 단위는 s(초)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition 속성 정리</title>
<style>
.box-wrap {
width: 500px; padding: 20px;
}
.box-wrap > div {
width: 50px;
height: 50px;
margin-bottom: 10px;
background: orange;
transition-duration: 0.5s;
}
.box-wrap:hover > div {
width: 400px;
}
.box-wrap > .box1 {
transition-delay: 0s; /*transition-delay 를 줘서 0s 지연시킴*/
}
.box-wrap > .box2 {
transition-delay: 0.3s; /*0.3s 지연시킴*/
}
.box-wrap > .box3 {
transition-delay: 0.5s; /*0.5s 지연시킴*/
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
box-wrap이 안에 자식 요소로 3개의 요소를 감싸고 있음
자식 요소들은 가로 크기를 50px로 줌
부모인 box-wrap에 마우스를 올리면 자식 요소가 400px로 넓어지게 함
자식 요소들 각각에 transition-delay 를 줘서 가로 크기가 각각 변하는 것에 시간차를 둠2️⃣ transition-duration
- 변화가 일어나는 시간을 지정하는 속성. 단위는 s(초)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition 속성 정리</title>
<style>
.box-wrap {
width: 500px; padding: 20px;
}
.box-wrap > div {
width: 50px;
height: 50px;
margin-bottom: 10px;
background: orange;
transition-duration: 0.5s;
}
.box-wrap:hover > div {
width: 400px;
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>자식 요소들에 transition-duration: 0.5s;를 줘서 가로 크기가 변하는 것에 시간차를 둠3️⃣ transition-property
- 변화의 시간차를 둘 속성을 정하는 속성
- 속성명은 여러 개를 지정해도 된다.
transition-property : 속성명, 속성명;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition 속성 정리</title>
<style>
.box-wrap {
width: 500px; padding: 20px;
}
.box-wrap > div {
width: 50px;
height: 50px;
margin-bottom: 10px;
background: orange;
transition-property : width, background-color;
transition-duration: 1s, 0.5s;
}
.box-wrap:hover > div {
width: 400px; /*크기 변화*/
background: lightblue; /*배경색 변화*/
}
.box-wrap > .box1 {
transition-delay: 0s;
}
.box-wrap > .box2 {
transition-delay: 0.3s;
}
.box-wrap > .box3 {
transition-delay: 0.5s;
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>4️⃣ transition-timing-function
- 변화의 움직임에 ease(가속, 감속)효과를 주는 속성
✏️ transition-timing-function 값의 종류
- ease : 기본값, 느리게 시작하고 빠르게 전환한 다음 천천히 종료
- linear : 처음부터 끝까지 같은 속도로 전환
- Ease-in : 가속, 느린 시작으로 빠른 끝 ( 느린 느낌 )
- Ease-out : 감속, 빠른 시작으로 느린 끝 ( 빠른 느낌 )
- Ease-in-out : 느린 시작과 느린 끝으로 전환효과 지정
- Cubic-bezier(n, n, n, n) : 3차 베지어 함수에서 자신의 값을 임의로 정함
💡 cubic-vezier를 쉽게 구현할 수 있는 사이트 주소 : https://cubic-bezier.com/
5️⃣ transition 속기법
transition 관련 속성들을 한 번에 작성하는 것을 속기법이라고 한다.
transition : 속성 시간 속도 지연시간; 
뚜벅뚜벅