I'm trying to create a simple bounce card animation, but I've run into an issue where the animation resets and doesn't flow smoothly.
Could you take a look at this code snippet:
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
left: 200px;
position: absolute;
}
@keyframes cardBouncing {
20%, 60%, to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
0%, 40%, 80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 1.5s cardBouncing infinite; //flipInX;
}<div>Hello!</div>- Any suggestions on how to make it bounce without that awkward "jump"?
- This is intended for a drag animation - how can I center it on the mouse cursor position? Currently, it seems to veer too far to the left. Is there a way to adjust this?