使用关键帧平滑滚动

Question

我最近发现了css3关键帧，我想用悬停状态来实践该方法。不幸的是，我注意到滚动状态根本不平滑，直接回到第一帧。

有没有办法让推出更顺畅？

这是我的工作：http://jsfiddle.net/WYbyJ

非常感谢

HTML：

<div></div>

CSS：

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
}
div:hover{
    animation:mymove .8s infinite;
    -webkit-animation:mymove .8s infinite;
}

@keyframes mymove{
    0%, 100% {
        width:100px;
    }
    50% {
        width:120px;
    }
}

@-webkit-keyframes mymove{
    0%, 100% {
        width:100px;
    }
    50% {
        width:120px;
    }
}