css - Onmouseout 动画过渡

Question

我正在尝试使用关键帧动画为鼠标悬停的 div 设置动画：

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

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

所以当用户鼠标移出时会有一些过渡，但我想使用动画关键帧而不是正常过渡来做到这一点：

@-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;
    }
}