CSS过渡：跳跃响应

Question

我在悬停时有一个元素比例大小，但由于某种原因，当你快速移动鼠标/看一次动画后，动画非常跳跃。我知道有很多类似的问题，但我对CSS过渡相对较新，我还没有找到有效的解决方案。

My Fiddle

你可以忽略jQuery，但我把它包括在内，因为它负责跳跃行为。

CSS

.circle-container {
    background-color: #FDA220;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    text-align: center;
    display: inline-block;
    line-height: 100px;
    margin-top: -60px;

    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;

    &:hover {
        -webkit-transform: scale(1.25); 
        -moz-transform: scale(1.25);
        -o-transform: scale(1.25);
        transform: scale(1.25);
    }
}