DAY 27. 트랜지션(transition)
transition: 변화, 전환
웹 요소의 배경색이나 스타일 속성이 시간에 따라 바뀌는 것.
위의 영상에서처럼 transition을 사용하면 완전히 색, 모양, 테두리 등을 바꿀 수 있다.
트랜지션transition의 속성 요약
| 종류 | 설명 |
|---|---|
| transition-property | 트랜지션의 대상 지정. |
| transition-duration | 트랜지션을 실행할 시간 지정. |
| transition-timing-function | 트랜지션의 실행 형태 지정. |
| transition-delay | 트랜지션의 지연 시간 지정. |
| transition | 위의 모든 속성을 한꺼번에 정함. |
트랜지션 대상 지정: transition-property
어떤 속성에 트랜지션을 적용할 것인지 지정한다.
transition-property: all | none | 속성이름1, 속성이름2...
| 속성값 | 설명 |
|---|---|
| all or 아예 transition-property를 안 씀 |
요소의 모든 속성에 트랜지션이 적용됨. default 값. |
| none | 트랜지션을 하는 동안 아무 속성도 안 바뀜. |
| 속성이름 | 트랜지션을 적용할 속성을 원하는 것만 지정함. 여러 개의 속성을 지정하고 싶을 때는 쉼표(,)로 구분해 나열함. |
트랜지션 진행 시간 지정: transition-duration
트랜지션의 진행 시간을 지정해 속성이 자연스럽게 바뀌도록 애니메이션 효과를 만들 수 있다.
transition-duration: 시간;
시간 단위는 초(s),
그보다 더 세밀하게 조정하는 밀리초(ms)
가 있다.
또한, 시간 값을 0이나 그보다 작은 음수로 나타낸다면, 애니메이션 효과가 즉시 나타난다.
그냥 바뀌어버림;;
예제 1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Transition</title>
<style>
.box {
margin: 20px auto;
width: 100px;
height: 100px;
background-color: #07f;
border: 1px solid #222;
transition-property: width, height; /* 트랜지션 적용할 대상 - 너비, 높이 */
transition-duration: 2s, 1s; /* 트랜지션 시간 - 2초, 1초 */
}
.box:hover {
width: 200px;
height: 120px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>↓
위의 예제에서는 width와 height(속성 2개)를 트랜지션 하는 데,
각각 2초와 1초의 시간(2개의 시간)을 주도록 되어있다.
하지만, transition-property에서 지정한 속성값의 개수와 transition-duration에서 지정한 속성값의 개수가 다르다면 어떻게 될까?
책에서는 속성 순서대로 시간값을 반복해서 적용한다고 되어있다.
그게 그래서 어떻게 적용된다는 것인지 바로 이해되지 않아서 MDN 사이트에 들어가 검색해보았다.
만약에
transition-property 속성값 개수 > transition-duration 속성값 개수
로 가정한다면,
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}││
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}와 같이 적용된다는 뜻이고,
반대로,
transition-property 속성값 개수 < transition-duration 속성값 개수
로 가정한다면,
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}││
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}처럼 transition-duration에 적힌 뒤쪽 두 개의 속성값은 버려버리는 결과를 나타내게 된다.
cf,
opacity: 불투명함.
즉, 불투명도를 지정하는 속성이라고 한다.
트랜지션 속도 곡선 지정: transition-timing-function
트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해서 전체 속도 곡선을 만든다.
미리 정해진 키워드 or 베지에 곡선을 이용해 표현한다.
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2) ;
| 속성값 | 설명 |
|---|---|
| linear | 시작부터 끝까지 똑같은 속도로 진행함. |
| ease | 처음엔 천천히 시작함 → 점점 빨라짐 → 마지막엔 천천히 끝남. default값. |
| ease-in | 느리게 시작함. |
| ease-out | 느리게 끝냄. |
| ease-in-out | 느리게 시작하고 느리게 끝냄. |
| cubic-bezier(x1, y1, x2, y2) | 베지에 함수를 정의해서 사용함. 0 ≤ x1, y1, x2, y2 ≤ 1 |
예제 2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>transition-timing-function</title>
<style>
#ex div {
float: left;
width: 100px;
height: 50px;
margin: 5px 10px;
padding: 5px;
color: white;
background-color: #006aff;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
#ex:hover div {
height: 400px;
}
#ex .linear {
transition: 3s linear;
}
#ex .ease {
transition: 3s ease;
}
#ex .ease-in {
transition: 3s ease-in;
}
#ex .ease-out {
transition: 3s ease-out;
}
#ex .ease-in-out {
transition: 3s ease-in-out;
}
</style>
</head>
<body>
<div id="ex">
<div class="linear"> linear </div>
<div class="ease"> ease </div>
<div class="ease-in"> ease-in </div>
<div class="ease-out"> ease-out </div>
<div class="ease-in-out"> ease-in-out </div>
</div>
</body>
</html>↓
베지에 함수를 이용하는 예제는 책에 없었다.
따로 공부를 하려고 검색해봤는데, 아주 정리 잘 해두신 분이 있어서 링크를 가져왔다.
이해하는 데 도움됐어요 감사합니다😊
https://basemenks.tistory.com/281
cubic-bezier 에 대해서 이보다 잘 정리할 수 없다
1. cubic-bezier란? cubic-bezier란 다음과 같습니다. 베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전히 포함되어 있기
basemenks.tistory.com
트랜지션 지연 시간 설정: transition-delay
트랜지션을 언제부터 시작할 것인지 지정한다.
transition-delay: 시간;
지정한 시간만큼 기다렸다가 애니메이션이 시작된다.
transition-duration처럼 초(s), 밀리초(ms) 단위를 사용하고, default값은 0이다.
(내가 만든) 예시 1.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>transition-delay</title>
<style>
#ex div {
float: left;
width: 100px;
height: 50px;
margin: 5px 10px;
padding: 5px;
color: white;
background-color: #006aff;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
#ex:hover div {
height: 400px;
}
#ex .linear {
transition: 3s linear;
}
#ex .lineardelay {
transition: 3s 2s linear;
}
</style>
</head>
<body>
<div id="ex">
<div class="linear"> linear </div>
<div class="lineardelay"> delay </div>
</div>
</body>
</html>↓
transition
위에서 했던 transition-property, transition-duration, transition-timing-function, transition-delay를 별도로 작성할 것 없이 transition 하나로 통합해서 작성할 수 있다.
시간값으로 작성하는 transition-duration, transition-delay를 둘 다 작성할 경우에는,
먼저 쓰인 값을 duration, 뒤에 쓰인 값을 delay로 간주한다.
그 외의 것들은 각각의 속성값의 형태가 다르니까 순서는 상관 없다.
transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값> ;
예제 3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>transition통합</title>
<style>
.box {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: #fb5;
border: 1px solid #222;
transition: 2s ease-in; /* 대상: all, 시간 2초, 함수: ease-in */
}
.box:hover { /* 여기 적힌 속성이 모두 트랜지션 대상 */
width: 200px;
height: 200px;
background-color: #f50;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>↓
책에 나온 실습 - 마우스 오버하면 상품 정보 표시하기.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 애니메이션</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="images/prod1.jpg">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod2.jpg">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod3.jpg">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html>+
#container {
width:1000px;
margin:20px auto;
}
h1 {
text-align:center;
}
.prod-list {
list-style:none;
padding:0;
}
.prod-list li {
float: left;
padding: 0;
margin: 10px;
overflow: hidden;
}
.prod-list img {
margin:0;
padding:0;
float:left;
z-index:5;
}↓
이렇게 제시된 예제에
① 상품 설명 글 안 보이게 불투명도를 0으로 지정하기
.prod-list .caption {
position: absolute;
top: 200px; /* 기준 위치보다 200px 아래로 */
width: 300px;
height: 200px;
padding-top: 20px;
background: rgba(0, 0, 0, 0.6); /* 반투명한 검정 배경 */
opacity: 0; /* 화면에 보이지 않게 */
transition: all 0.6s ease-in-out; /* 부드럽게 나타나도록 트랜지션 추가 */
z-index: 10; /* 다른 요소보다 위에 있도록 */
}를 추가하고,
② position: absolute;를 정확하게 적용하기
→ .caption 요소의 부모 요소는 <li>니까 <li> 요소 스타일에 position: relative;를 추가로 적어 넣기
.prod-list li {
float: left;
padding: 0;
margin: 10px;
overflow: hidden;
position: relative;
}
그다음,
③ 마우스 포인터를 올리면 상품 설명 글 보여주기
→ 상품 설명 글을 그림 위로 이동, 불투명도를 1로 수정할 수 있도록 추가로 적어 넣기.
.prod-list li:hover .caption {
opacity: 1; /* 설명 글을 화면에 나타나게 */
transform: translateY(-200px); /* 설명 글을 위쪽으로 200px 이동 */
}
④ 마지막으로, 그림 위에 나타난 상품 설명 글씨가 안 보이니까 흰색으로 바꾸도록 추가로 적어 넣기.
.prod-list .caption h2, .prod-list .caption p {
color: #fff;
text-align: center;
}↓