안녕하세요~ 오늘은 앞에서부터 막대의 크기가 점차적으로 변하는 로딩바 애니메이션을
만들어 보려고 합니다. 약간의 시간차를 두고 막대의 높이가 차례로 변하는 애니메이션인데요!
결과 화면부터 확인해 보겠습니다.
위와 같은 로딩바입니다~ 결과화면으로 보면 어떤 효과인지 바로 알 수 있는데, 막상 문장으로 표현하려니
어떤 로딩바인지 한단어로 정의하기가 쉽지 않네요... 아무튼 위와 같은 로딩바를 만들어 보겠습니다.
우선 막대가 위치할 영역과 막대를 구성할 요소부터 만들어 보겠습니다.
1. 영역과 막대 요소 만들기
<style>
.container {
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #19CE60;
position: relative;
}
.area {
width: 40px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 20px);
}
.item {
background-color: white;
height: 100%;
width: 6px;
float:left;
margin-left: 1px;
margin-right: 1px;
transform: scaleY(0.4);
}
</style>
<body>
<div class="container">
<div class="area">
<div class="rect1 item"></div>
<div class="rect2 item"></div>
<div class="rect3 item"></div>
<div class="rect4 item"></div>
<div class="rect5 item"></div>
</div>
</div>
</body>
전체 영역인 container를 relative 포지션으로 가로, 세로 200px로 화면 가운데 위치해 주고, 안에 막대바가 들어갈 area영역을 absolute 포지션으로 가운데 자리 잡아 주었습니다.
사각형 5개를 rect1 ~ rect5 이름으로 각각 만들어 주고 float: left 속성으로 왼쪽부터 자리 잡아 주었습니다. 가로 길이는 6px로 하고 왼쪽 오른쪽 여백을 margin 속성으로 1px씩 주어 막대바 사이에 공간을 확보해 줍니다.
2. 막대의 높이가 변하는 애니메이션 효과 주기
<style>
.item {
transform: scaleY(0.4);
animation: change-scale 1.2s infinite ease-in-out;
}
@keyframes change-scale {
0%, 40%, 100% {
transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
}
}
</style>
이제 막대에 높이가 변하는 애니메이션 효과를 부여해 보겠습니다.
초기 막대의 transform: scaleY() 값을 0.4에서 시작해 change-scale이라는 이름의 애니메이션 효과를 1.2초 동안 무한으로 ease-in-out 속성으로 변동폭을 주어 지정합니다.
@keyframes의 경우 처음 0%일때는 transform: scaleY()값을 초기값인 0.4로 시작해, 20%일때 1.0으로 가장 길게 늘여주고 나머지 40%, 100%까지 다시 0.4로 줄여 커졌다가 다시 작아지는 효과를 일괄적으로 적용해 줍니다. 막대의 순차적인 크기 변화를 프레임별로 시간차를 적절히 분배해서 적용하기위해 위와같은 프레임 속성값을 설정했습니다.
여기 까지의 결과를 확인해 보겠습니다.
위와 같이 모든 막대가 동시에 높이 값이 변하며 움직이는 애니메이션이 완성되었습니다.
이제 막대별로 약간의 시간차를 주어 최종 결과화면처럼 만들어 보겠습니다.
3. 막대별로 시간차 효과 주기
<style>
.rect2 {
animation-delay: 0.1s;
}
.rect3 {
animation-delay: 0.2s;
}
.rect4 {
animation-delay: 0.3s;
}
.rect5 {
animation-delay: 0.4s;
}
</style>
각각의 막대 아이템마다 animation-delay 속성을 통해 0.1초씩 시간차를 부여하였습니다.
전체 애니메이션의 시간이 1.2초이기 때문에 전체 시간과 @keyframes 내부의 %, animation-delay 속성의 시간을 잘 배합해 주면 최종 결과 화면을 확인할 수 있습니다.
결과 화면을 다시 한번 확인해 볼까요?
오늘은 막대의 높이가 차례로 변하며 움직이는 로딩바 애니메이션을 만들어 보았습니다.
그럼 다음에 새로운 내용으로 찾아 오겠습니다! 오늘은 이만~
'animation' 카테고리의 다른 글
| CSS 바운스볼 애니메이션 만들기 (bounce ball animation) (0) | 2023.01.09 |
|---|---|
| SVG 원형 프로그래스바 (svg circle progress bar) (0) | 2023.01.04 |
| CSS 원형 로딩 스피너 (css circle loading spinners) (0) | 2022.12.22 |
| CSS 도트 확대 로딩바 (css dot loading bar) (0) | 2022.12.20 |
| CSS 테두리 효과 애니메이션(css border animation) (0) | 2022.12.19 |
댓글