Bounce card css animation - css

Question

I'm building a very simple bounce card animation, however at some point the animation got reseted and the result is not fluent.
Please check:
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>HOla!</div>
How I can make it bouncing without that "jump"
This is for a drag animation, how can I center in the mouse cursor position? It seems like it go to much at the left. It's possible?

Answer 1

The solution is with: animation-direction: alternate-reverse;
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
position: absolute;
left: 180px;
}
#keyframes cardBouncing {
from {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 0.4s cardBouncing infinite;
animation-direction: alternate-reverse;
}
<div> Hola! </div>