animationFillMode: forwards overwrites onhover effect

Question

I have a div element flies in the view stays there and may fly out later on based on user interaction. No problem with animationFillMode forwards, but it also has a :hover effect. Before starting the animation the hover works(offscreen but it works), but after flying in it loses the hover effect. I partly fixed that by putting !important after the hover effect changes but one problem remains... The transition duration is still missing... it just pops to where it should smoothly hover.

.folder-inside{

        width: 263px;
        height: 165px;
        position: absolute;
        background: #fff;
        top: -300px;
        left: 300px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        border: 1px solid #ddd;
        animation-duration: 1s;
        -webkit-transition: all 200ms ease !important; /* these importants don't do anything*/
        transition: all 200ms ease !important;

}

.folder:hover .folder-inside{

    -webkit-transform: rotate(-7deg) translateY(-15%) !important; /* thanks to these importants there is a visible change but it's instant*/
    transform: rotate(-7deg) translateY(-15%) !important;
}

@keyframes flyIn {

    from{
        top: -300px;
        left: 300px;
        transform: rotate(30deg);
    }
    to {
        top: 0px;
        left: 10px;
        transform: rotate(-3deg);
    }
}

@keyframes flyOut {

    from {
        top: 0px;
        left: 10px;
        transform: rotate(-3deg);
    }
    to {
        top: -300px;
        left: 300px;
        transform: rotate(30deg);
    }
}