使用jQuery或CSS动画-webkit-clip-path

Question

目前我正在尝试使用CSS动画在用户将鼠标悬停在其上时剪辑图像。但是，当从一个图像移动到另一个图像时，因为图像被剪切并且动画始终在特定关键帧处开始，所以动画看起来是锯齿状的。我认为使用剪辑路径的当前值并将其设置为结束位置是一种可能的解决方案，但仅使用CSS似乎不可能。但是，当我尝试使用jQuery动画剪辑路径时，它不会这样做，我不确定它是否支持。

有人有任何建议吗？

有些动画如下，因为它们没有相同的0％关键帧，图像会跳到0％并从那里开始动画。

@-webkit-keyframes "animation"
{
0%
{
    -webkit-clip-path: polygon(25% 0%,100% 0%,75% 100%,0% 100%);
}

100%
{
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
}

@-webkit-keyframes "animation2"
{
0%
{
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}

100%
{
    -webkit-clip-path: polygon(25% 0%,100% 0%,75% 100%,0% 100%);
}
}

感谢。