如何停止HTML和CSS中的動畫

Question

我正在嘗試爲我的網站製作類似於THIS示例的降臨日曆。

我有創建日曆的基本佈局，當我將鼠標懸停在日曆上的某個「貼圖」上時，動畫開始並且貼圖會打開。動畫以這樣的方式擺動瓷磚，就好像你打開了一扇門，它可以打開到90度。但是，當動畫達到90度時，瓷磚將重置爲原來的關閉位置。

當用戶將光標從瓷磚上移開時，如何在用戶將光標懸停在瓷磚上時再打開門，然後再次關閉瓷磚？

當瓷磚打開時，我還需要在它後面有一個圖像，這是一個可點擊鏈接到我網站上的另一個頁面。我已經設置了這一點，但所有顯示的是我的.tile div（background-color：＃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

而不是使用keyframes使用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>