CSS 바운스볼 애니메이션 만들기 (bounce ball animation)
안녕하세요! 오늘은 공이 위아래로 통통 튀는 애니메이션을 만들어 보려 합니다.
난이도가 높아지는 것을 우려하여 자바스크립트는 쓰지 않고 오로지 html과 css만을 사용하여 최대한 간단하게 만들어 보려해요! 리얼하게 튀는 효과를 주려다 보니 keyframe 쪽이 조금 복잡해 지긴했지만 그래도 css만을 이용해 구현해 보았습니다. 공이 튈때마다 그림자 크기를 늘이고 줄이면서 그림자 효과도 추가로
함께 구현해 보았습니다. 그럼 결과화면을 먼저 확인해 볼까요?
저렇게 하염없이 통통통통 계속 튀는 애니메이션 입니다!
활용은 로딩화면에서 사용해도 괜찮을 것 같고 메인화면에 포인트를 주기 위한 용도로도 사용할 수 있을 것 같아요~ 그럼 영역과 요소부터 만들어 보겠습니다.
1. 배경과 공, 그림자 요소 만들기
<style>
.container {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #F07260;
}
.circle {
position: absolute;
top: 40px;
left: calc(50% - 20px);
background-color: white;
width: 40px;
height: 40px;
border-radius: 100%;
}
.shadow {
position: absolute;
width: 40px;
height: 5px;
left: calc(50% - 20px);
bottom: 20px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
</style>
<body>
<div class="container">
<div class="circle"></div>
<div class="shadow"></div>
</div>
</body>
애니메이션을 주기 위해 html태그를 이용해서 먼저 요소를 만들어 줍니다.
저는 배경영역은 container 이름으로 width를 200px, height를 200px로 잡았고 동그란 공 요소는
width, height 각각 40px로 크기를 정했습니다. border-radius: 100% 속성으로 공을 동그랗게 만들어주고 포지션 absolute와 위아래 위치를 잘 계산하여 알맞은 위치에 자리 잡아 주었습니다.
그림자 요소는 shadow이름으로 새로 만들어 주고 그림자의 width는 40px로 공과 동일하게 height의 경우 5px로 설정해 약간 납작하게 만들어 주었습니다. 그림자 배경색의 경우 검정색으로 주되 투명도 값을
0.2로 설정하여 그림자처럼 약간 투명하게 보이도록 효과를 주었습니다. 여기까지 만든 결과 화면을 확인해 볼까요?
2. 공에 튀어오르는 애니메이션 주기
<style>
.circle {
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
top: 40px;
}
50% {
top: 120px;
height: 40px;
}
55% {
top: 150px;
height: 25px;
}
65% {
top: 120px;
height: 40px;
}
95% {
top: 40px;
}
100% {
top: 40px;
}
}
</style>
이제 요소를 모두 만들었으니 튀어 오르는 애니메이션 효과를 줘 보겠습니다. 먼저 공에 효과를 줄건데
bounce라는 이름의 애니메이션을 1초동안 무한으로 반복한다는 속성을 다음과 같이 주었습니다.
animation: bounce 1s infinite;
그리고 나서 애니메이션의 진행 정도에 따라 공의 위치를 조금씩 바꿔 보겠습니다.
처음 0%일 때는 공의 초기위치이기 때문에 초기 circle의 top값인 40px로 시작하여
50%일 때는 top값을 120px, 55%일 때가 바닥에 튈때 위치로 가장 큰값 150px을 주고
65%일 때는 top 값을 서서히 줄여 120px, 다시 95% 까지 진행하면 원래 초기값인 40px로 원위치하여 원래 위치를 찾아줍니다. 그리고 55%일때 바닥에 부딪치는 효과를 보여주기 위해서 height값을 원래 높이 보다 줄인 25px로 만들어주어서 공이 약간 찌그러지게 표현해 주었습니다.
3. 공의 위치에 맞게 그림자 크기 조절해 주기
<style>
.shadow {
animation: shadow 1s infinite;
}
@keyframes shadow {
0% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
}
50% {
transform: scale(1);
background-color: rgba(0, 0, 0, 0.2);
}
55% {
transform: scale(1);
background-color: rgba(0, 0, 0, 0.2);
}
65% {
transform: scale(0.5);
background-color: rgba(0, 0, 0, 0.15);
}
95% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
}
100% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
}
}
</style>
이제 공의 위치에 맞게 그림자 크기를 변경해 주는 애니메이션 효과를 줘 보겠습니다.
마찬가지로 shadow 라는 이름의 애니메이션을 1초동안 무한으로 반복해주도록 다음과 같이
설정해 줍니다.
animation: shadow 1s infinite;
0%에서는 공이 맨위에 위치해있으므로 그림자 transform scale 값을 0.1로 가장 작게 만들고
투명도도 0.1값을 주어 원래보다 흐리게 표현해 줍니다.
50%, 55%로 공이 내려오면 transform scale 값을 1까지 키워 그림자를 원래 공크기만큼 키우고
투명도도 원래 투명도값인 0.2로 동일하게 맞춰줍니다.
다시 95% 100% 까지 공이 위로 올라가면 transform scale 값은 다시 0.1로 낮추고 투명도는 0.1로
흐리게 만들어 줍니다.
그림자 애니메이션 효과까지 주면 위 화면처럼 공이 튀는 애니메이션을 볼 수 있는데요! 여기서 좀더 자연스럽게 공이 튀어오르는 효과를 주려면 animation-timing-function 속성을 사용합니다. 이 속성을 사용하면 효과가 천천히 시작되고 천천히 끝나는 디테일한 모션 표현이 가능합니다.
4. animation-timing-function 속성으로 디테일한 모션 효과 주기
<style>
@keyframes bounce {
0% {
top: 40px;
animation-timing-function: ease-in;
}
50% {
top: 120px;
height: 40px;
animation-timing-function: ease-out;
}
55% {
top: 150px; height: 25px;
animation-timing-function: ease-in;
}
65% {
top: 120px; height: 40px;
animation-timing-function: ease-out;
}
95% {
top: 40px;
animation-timing-function: ease-in;
}
100% {
top: 40px;
animation-timing-function: ease-in;
}
}
@keyframes shadow {
0% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
animation-timing-function: ease-in;
}
50% {
transform: scale(1);
background-color: rgba(0, 0, 0, 0.2);
animation-timing-function: ease-out;
}
55% {
transform: scale(1);
background-color: rgba(0, 0, 0, 0.2);
animation-timing-function: ease-in;
}
65% {
transform: scale(0.5);
background-color: rgba(0, 0, 0, 0.15);
animation-timing-function: ease-out;
}
95% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
animation-timing-function: ease-in;
}
100% {
transform: scale(0.1);
background-color: rgba(0, 0, 0, 0.1);
animation-timing-function: ease-in;
}
}
</style>
위에 주었던 @keyframes 속성 마지막 줄에
animation-timing-function: ease-in
animation-timing-function: ease-out 값을 알맞게 적용해 줍니다.
ease-in의 경우 애니메이션 효과가 천천히 시작되는 설정이고
ease-out의 경우 애니메이션 효과가 천천히 끝나는 설정입니다.
그럼 최종 결과화면을 확인해 볼까요?
오늘은 공이 튀어오르는 바운스볼 애니메이션을 만들어 보았습니다!
그럼 다음에 또다른 내용으로 찾아오겠습니다.
오늘은 이만~!