Onmouseout过渡与动画

Question

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

div{
    -webkit-transition: -webkit-animation:flipInY 2s;
}

div:hover{
    -webkit-animation: flipInY 0.8s;
}

因此，当用户mouseout会有一些转换，但我想使用动态关键帧而不是正常转换：

@-webkit-keyframes flipInY {

    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}