앞서 살펴본 내용에 이어서, CSS3의 트랜지션 속성들에 대해서 더 알아보도록 하겠습니다.
[CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1
트랜지션(transition)이란 웹의 요소 스타일 속성이 시간에 따라 바뀌는 것을 의미합니다. 앞서 배웠던 transform에서의 단순한 형태나 속성 변화와 달리, 실제 애니메이션처럼 색상이 자연스럽게 변
nozeroslope.tistory.com
(3) transition-timing-function : 트랜지션 속도의 곡선 지정
transition-timing-function 속성을 통해서는 트랜지션 효과가 적용되는 시작 / 중간 / 끝 지점에서의 속도를 지정하여 전체 속도 곡선을 조정할 수 있습니다. 미리 정해진 키워드, 혹은 bezier 곡선을 사용하기도 하지요. 속성 지정 양식은 간단히 요약하면 아래와 같습니다. 그리고 각각의 속성 값의 속도에 대해서도 표를 통해 살펴보시기 바랍니다.
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
| 종류 | 설명 |
| ease | 처음에는 천천히 - 점점 빨라짐 - 천천히 끝남. 기본 값. |
| linear | 시작부터 끝까지 같은 속도로 진행. |
| ease-in | 느리게 시작한다. |
| ease-out | 느리게 끝난다. |
| ease-in-out | 느리게 시작하고, 느리게 끝난다. |
| cubic-bezier(n, n, n, n) | 베지에 함수를 이용한 정의. n 값은 0 ~ 1 사이만 사용할 수 있다. |
예제는 다음과 같이 작성해볼 수 있겠습니다. 참고로 여기서 transition 속성에 일괄적으로 값을 지정해 두었습니다. 이와 관련된 내용은 하단에 다시 한번 설명하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition ease test</title>
<style>
#ex div{
float:left;
width:100px;
height:50px;
margin:5px 10px;
padding:5px;
color:white;
background-color:yellowgreen;
border-radius:5px;
text-align:center;
font-weight:bold;
}
#ex:hover div{
height:400px;
}
#ex .ease {
transition: 3s ease;
}
#ex .linear{
transition:3s linear;
}
#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="ease"> ease </div>
<div class="linear"> linear </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>
(4) transition-delay : 트랜지션의 지연시간 설정
간단하게 설명하자면, 애니메이션이 언제부터 시작 될지를 결정합니다. 즉, 지정한 시간만큼 기다렸다가 뒤늦게 트랜지션이 시작됩니다. 초(s), 밀리초(ms)를 사용하며 기본적으로는 0으로 설정된 상태라고 생각하시면 됩니다.
○ transition 속성 : 트랜지션 속성 일괄 적용하기
위에서 프로퍼티나 딜레이, 타이밍 등의 값을 따로 설정하는 형태로 속성에 대해서 살펴보았습니다. 다만, 여러 트랜지션 속성의 적용 대상이 일괄적으로 진행 시간이 동일하다면 transition 속성을 통해서 한꺼번에 지정할 수 있습니다.
transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>
순서는 상관 없지만 시간과 관련된 transition-duration, transition-delay가 있으므로 시간 값이 두 개가 지정된다면 전자의 시간을 transition-duration으로, 후자의 시간을 transition-delay로 간주하여 처리합니다.
<!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>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 2 (1) | 2023.09.15 |
|---|---|
| [CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 1 (0) | 2023.09.01 |
| [CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1 (0) | 2023.08.21 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 4 (0) | 2023.08.04 |
| [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3 (0) | 2023.07.31 |
