How do I stop animation in HTML and CSS - html

Question

I am trying to make an advent calendar for my website similar to THIS example.
I have the basic layout of the calendar created and when I hover over one of the "tiles" on the calendar the animation starts and the tile swings open. The animation swings the tile in the fashion as if you are opening a door towards you and it swings open to 90 degrees. However, when the animation gets to 90 degrees, the tile is reset to its original closed position.
How can I keep the door open while the user hovers over the tile and then swing the tile closed again when the user removes the cursor from the tile?
When the tile is open I also need to have an image behind it that is a clickable link to another page on my site. I have set this in a but all that is displayed is the background color of my .tile div (background-color: #000;) and not the clickable image or even my .back div.
Can anyone please help.
I have attached my current CSS and HTML that shows how the tile is created and animated.
Note: I do not need to handle touch events from mobile devices for this example.
CSS
.tile
{
background-color: #000;
color: #ffffff;
border: 1px solid #220001;
}
/* Flip the tile when hovered */
.tile:hover .flipper, .tile.hover .flipper
{
-webkit-animation: example 2s;
}
#-webkit-keyframes example
{
from
{
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
to
{
-webkit-transform: perspective(500) rotateY(-90deg);
-webkit-transform-origin: 0% 0%;
}
}
.tile, .front, .back
{
width: 120px;
height: 120px;
}
.flipper
{
position: relative;
}
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front Tile - placed above back */
.front
{
z-index: 2;
transform: rotateY(0deg);
background-color: #760805;
}
/* Back - initially hidden Tile */
.back
{
background-color: #000;
}
HTML
<table>
<tr>
<td>
<div class="tile">
<div class="flipper">
<div class="front">
<!-- front content -->
<p>December 1</p>
</div>
<div class="back">
<!-- back content -->
<a href="http://www.google.com">
<img src="images/myImage1.jpg">
</a>
</div>
</div>
</div>
</td>
</tr>
</table>

Answer 1

Instead of using keyframes use transition
(Note: I've also added backface-visibility: true; and increased the rotation to -95deg to make the effect more similar to your example)
.tile .front {
transition: all 1.5s ease-in-out;
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
backface-visibility: visible;
}
.tile:hover .front, .tile.hover .front
{
-webkit-transform: perspective(500) rotateY(-95deg);
-webkit-transform-origin: 0% 0%;
}
Demo
.tile
{
background-color: #000;
color: #ffffff;
border: 1px solid #220001;
}
.tile .front {
transition: all 1.5s ease-in-out;
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
backface-visibility: visible;
}
/* Flip the tile when hovered */
.tile:hover .front, .tile.hover .front
{
-webkit-transform: perspective(500) rotateY(-95deg);
-webkit-transform-origin: 0% 0%;
}
.tile, .front, .back
{
width: 120px;
height: 120px;
}
.flipper
{
position: relative;
}
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front Tile - placed above back */
.front
{
z-index: 2;
transform: rotateY(0deg);
background-color: #760805;
}
/* Back - initially hidden Tile */
.back
{
background-color: #000;
}
<table>
<tr>
<td>
<div class="tile">
<div class="flipper">
<div class="front">
<!-- front content -->
<p>December 1</p>
</div>
<div class="back">
<!-- back content -->
<a href="http://www.google.com">
<img src="http://placehold.it/120x120">
</a>
</div>
</div>
</div>
</td>
</tr>
</table>