Css 带动画的Onmouseout转换

我正在尝试使用关键帧动画在mouseout上设置div动画：

div{
-webkit转换：-webkit动画：flipInY 2s；
}
div:悬停{
-webkit动画：flipInY 0.8s；
}

因此，当用户鼠标移出时，会有一些过渡，但我想使用动画关键帧而不是普通过渡来实现这一点：

@-webkit关键帧flipInY{
0% {
-webkit变换：透视（400px）旋转（90度）；
不透明度：0；
}
40% {
-webkit变换：透视（400px）旋转（-10度）；
}
70% {
-webkit变换：透视（400px）旋转（10deg）；
}
100% {
-webkit变换：透视（400px）旋转（0deg）；
不透明度：1；
}
}

jsfiddle会有帮助吗？问题是，当我用鼠标移出动画反转时，没有过渡：D，当鼠标离开div时，我希望有一些漂亮的过渡，但使用KwyFrame