CSS3 custom animation triggering after :hover

Question

I'm creating a series of "windows" or "doggie doors" that, when hovered on, seem to push back into the "window" just like a doggie door.

I've been able to create a natural looking effect of the doggie door closing. It swings back and forth a couple times and then rests back to its default position.

My problem is that I haven't been able to figure out a way to trigger the swing when the hover is released. I know its a logic issue because I've seen examples of it done here and using keyframes [here][2]. I also know I could solve this with javascript but I'm sticking strictly to CSS for this site.

UPDATE:

Here is the working example. Fiddle

Thank you Nobita!

HTML:

<ul class="window">
    <li>
        <figure class="door">
            <img src="http://www.ta-sa.org/data/images/laughing_man_big_2.png" alt="">
        </figure>
    </li>
</ul>

CSS:

* {
    list-style: none;



}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
    perspective:1000px;
    -webkit-perspective:1000px;
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: top;
    -ms-transform-origin: top;
    /* IE 9 */
    -webkit-transform-origin: top;
    /* Safari and Chrome */
    -moz-animation: swing 2s;
    -webkit-animation: swing 2s;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    0% {
        -webkit-transform: rotateX(-60deg);
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

Answer 1

Nice technique, I didn't know you could trigger animations when hovering off a div! I fiddled a bit and hopefully got it working even if not as smoothly as expected, but it's probably enough to take a step further in the right direction.

The problem here is - I guess - that you're not declaring an animation on hover state (as suggested in your links), but just a transition. So I tried adding a transition for the 'door' to open on hover...

.door:hover img {
  transform-origin: top;
  transform: rotateX(-60deg);
  transition: all .2s; 

...and an animation which will fire on mouseout:

   animation: swing;
 }

Hope this fiddle shows what you need or at least helps you someway. Anyway very glad myself to have learnt something new, thanks.

* {
    list-style: none;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
 
}
*:hover {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
    perspective:1000px;
    -webkit-perspective:1000px;
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: top;
    -ms-transform-origin: top;
    /* IE 9 */
    -webkit-transform-origin: top;
    /* Safari and Chrome */
    -moz-animation: swing 2s;
    -webkit-animation: swing 2s;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

<ul class="window">
    <li>
        <figure class="door">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="">
        </figure>
    </li>
</ul>