html - 如何停止 HTML 和 CSS 中的动画

Question

我正在尝试为我的网站制作类似于 THIS 的降临节日历例子。

我创建了日历的基本布局，当我将鼠标悬停在日历上的一个“图 block ”上时，动画开始并且图 block 摆动打开。动画以时尚的方式摆动瓷砖，就好像您正在向您打开一扇门，它摆动到 90 度。但是，当动画达到 90 度时，图 block 将重置为其原始关闭位置。

如何在用户将鼠标悬停在图 block 上时让门保持打开状态，然后在用户将光标从图 block 上移开时再次关闭图 block ？

当磁贴打开时，我还需要在它后面有一个图像，该图像是指向我网站上另一个页面的可点击链接。我已经在 a 中设置了它，但显示的只是我的 .tile div 的背景颜色(背景颜色:#000;)，而不是可点击的图像，甚至不是我的 .back div。

谁能帮忙。我附上了我当前的 CSS 和 HTML，它们显示了磁贴的创建方式和动画效果。

注意:对于此示例，我不需要处理来自移动设备的触摸事件。

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

不使用关键帧，而是使用transition

(注意:我还添加了 backface-visibility: true; 并将旋转增加到 -95deg 以使效果更类似于您的示例)

.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%;
}

---

演示

.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>