<div class="ball bounce" onclick="
this.classList.remove('bounce');
setTimeout(()=>{
this.classList.add('bounce')
}, 1);
">click me!</div>
.ball {
position: absolute;
top: 20px;
left: 20px;
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);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.