728x90
안녕하세요,
오늘은 CSS에서 간단한 애니메이션 효과를 적용할 수 있는 transition 의 속성 중 하나인 transition-timing-function에 대해 알아보고자 합니다.
transition은 일정 시간에 걸쳐 변화가 부드럽게 일어나도록 합니다.
transition-timing-function은 이러한 변화가 일어나는 속도를 정의하는 데 사용됩니다. 애니메이션의 시작, 중간, 끝의 속도가 어떻게 변할 지 설정할 수 있습니다.
- ease : 애니메이션이 느리게 시작해서 중간에 빠르게 진행되며, 다시 느리게 끝남
- linear : 애니메이션이 일정한 속도로 진행됩니다.
- ease-in : 애니메이션이 천천히 시작되고, 끝날 때는 빨라짐
- ease-out : 애니메이션이 빠르게 시작하고, 끝날 때는 천천히 마무리됨
- ease-in-out : 애니메이션이 천천히 시작하고, 중간에 빨라졌다가 끝날 때는 다시 천천히 끝님
- cubic-bezier( x1, y1, x2, y2 ) : 사용자가 정의하는 속도를 만들 때 사용
- x값은 시간을 의미하고, x1과 x2는 0에서 1 사이의 값을 가짐
- x1은 애니메이션이 처음 시작하는 시간에 대한 제어점을, x2는 애니메이션이 중간 시간에서 끝날 때까지의 시간을 제어함
- y 값은 애니메이션의 진행 정도를 의미함
- y1과 y2는 0보다 작거나 1보다 클 수도 있음
- y1은 애니메이션이 처음 시작할 때의 속도, y2는 애니메이션이 끝날 때의 속도를 결정함
- y 값이 높으면 더 빠르게 진행되고, 낮으면 더 느리게 진행됨 - steps( n, direction )
- 애니메이션을 특정 단계 수로 나누어 진행하는 방식입니다.
- n은 단계 수를 의미하며, direction은 단계가 시작하는 방식입니다.
direction : start, end 가 값으로 설정될 수 있음
- start : 각 단계가 시작할 때 값이 변경됨
- end: 각 단계가 끝날 때 값이 변경됨 - initial : transition-timing-function 속성의 기본값(ease)으로 설정됨
- inherit : 부모 요소로부터 transition-timing-function 값을 상속받음
위의 속성값들을 활용한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-timin-function예제</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bar {
width: 100px;
height: 40px;
margin: 10px;
background-color: #d5fed6;
transition: width 2s;
}
.bar:hover {/*마우스를 바에 올릴 경우, 바 길이 변경*/
width: 700px;
}
.ease {
transition-timing-function: ease;
}
.linear {
transition-timing-function: linear;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
.cubic-bezier {
transition-timing-function: cubic-bezier(0.75, 0.1, 0.25, 1.5);
}
.steps {
transition-timing-function: steps(4, end);
}
</style>
</head>
<body>
<div class="container">
<div class="bar ease">ease</div>
<div class="bar linear">linear</div>
<div class="bar ease-in">ease-in</div>
<div class="bar ease-out">ease-out</div>
<div class="bar ease-in-out">ease-in-out</div>
<div class="bar cubic-bezier">cubic-bezier</div>
<div class="bar steps">steps</div>
</div>
</body>
</html>
시연 영상입니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS]CSS Flexbox에 대한 가이드 (0) | 2024.07.10 |
|---|---|
| [HTML/CSS] Position 속성에 대한 가이드 (0) | 2024.07.01 |
| [HTML/CSS] 버튼 클릭으로 하단 메시지 띄우기 (0) | 2024.05.25 |
| [HTML/CSS] html css 상단바 만드는법 (0) | 2024.05.19 |
| [HTML/CSS] Tailwind로 검색이 가능한 드롭다운 구현하기 (0) | 2024.05.13 |
