css3 求两个 贝塞尔曲线(cubic-bezier)函数 或其他 实现抛硬币动画效果方法

Question

想实现一个抛硬币的动画 无奈 各处找不到 打算自己写一个

代码如下

 <div class="move_Y">
        <div class="rotate"> </div>
 </div>

    .move_Y {
        animation: move 2s cubic-bezier(0.455, 0.1, 0.2, 0.955) 1s both;
        width: 100px;
        height: 100px;
        margin-top: 300px;
    }

    .rotate {
        animation: rotate 2s cubic-bezier(0.455, 0.1, 0.2, 0.955) 1s both;
        border-radius: 50%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 100%;
        background-color: aquamarine;
    }

    @keyframes move {
        0% {transform: translateY(0px); }
        50% { transform: translateY(-100px); }
        100% { transform: translateY(0px);
        }
    }
    @keyframes rotate {
        0% { transform: rotateX(0);}
        50% {  transform: rotateX(720deg);}
        100% { transform: rotateX(1440deg);}
    }

    /*  注释掉的是 想模拟一个抛之前的动画
@keyframes move {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(20px);
  }
  70% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0);
  }
  40% {
    transform: rotateX(-30deg);
  }
  70% {
    transform: rotateX(720deg);
  }
  100% {
    transform: rotateX(1440deg);
  }
} */

但是运行出来 不尽人意

个人认为
Y轴上下运动速度（快 慢 0 慢 快）应该符合 如下图的二次函数

旋转速度（越来越慢）应该符合 如下图的函数

然后熟练按下浏览器F12，打算在开发者模式下调
但是还是没能模拟出 实际生活中抛硬币的效果
求 2个 函数 或其他方法或思路（感谢）

发现问题1：旋转的转数 后半场要远低于前半场
@keyframes rotate {
0% { transform: rotateX(0);}
50% { transform: rotateX(1080deg); }
100% { transform: rotateX(1800deg); }
}