css3 - @keyframe - 动画：鼠标输入时的反向动画

Question

我一直在试验css3动画，我正在努力使用动画方向属性。

我想要做的是当鼠标进入div时，div：hover被激活，导致div动画向另一个方向移动。

我在无限循环上有原始动画，当鼠标进入div时（我猜）会生成另一个反向行进的div。只有当我将鼠标悬停在相对的行进div上时，才会出现这种情况。

我纯粹的人类思维直觉地认为，当我鼠标进入div时，它会停止动画那个方向并反转。

有可能这样做吗？这是我的小提琴：http://jsfiddle.net/rweeber/7cByH/1/

div
{
    width:100px;
    height:100px;
    background:purple;
    position:relative;
    -webkit-animation-name:test;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-play-state:running;
}
div:hover
{
    position:relative;
    -webkit-animation-name:test;
    -webkit-animation-duration:infinite;
    -webkit-animation-direction:reverse;
    -webkit-animation-play-state:paused;
}
@keyframes test
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    5%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes test
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}