css 의 keyframe 을 이용해서 공이 튀는 효과를 구현 해 봤습니다.
셈플로 참고 해 주세요.
<!DOCTYPE html>
<html>
<head>
<style>
.ball {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #FF5722;
}
.bounce {
animation: bounce_frames 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
animation-iteration-count: 4;
}
@keyframes bounce_frames {
from {transform: translate3d(0, 0, 0);}
to {transform: translate3d(0, 50px, 0);}
}
/* Prefix Support */ /*
bounce {
-webkit-animation-name: bounce_frames;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce_frames {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
} */
</style>
</head>
<body>
<div class="ball bounce" onclick="
this.classList.remove('bounce');
setTimeout(()=>{
this.classList.add('bounce')
}, 1);
">click me!</div>
</body>
</html>
'프론트엔드 개발 놀이터 > css, design' 카테고리의 다른 글
| 웹 폰트 아이콘 Font Awesome(폰트 어썸) 사용법 (1) | 2020.08.21 |
|---|---|
| CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch (0) | 2020.08.19 |
| 나눔스퀘어 웹폰트 공유 (0) | 2020.07.31 |
| css animation event 후 callback event (무한루프) (0) | 2020.07.22 |
| SVG 다루기 (0) | 2020.03.06 |