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>