CSS動畫還原，而不完成

Question

@import url(https://fonts.googleapis.com/css?family=Open+Sans); 
 

 
body { 
 
    height: 100vh; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: linear-gradient(to left, #517fa4, #243949); 
 
    font-family: Open Sans; 
 
} 
 

 
.card-container { 
 
    perspective: 900px; 
 
} 
 

 
.card { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15); 
 
    transition: all 0.6s ease; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    margin-right: 20px; 
 
} 
 

 
.front, .back { 
 
    position: absolute; 
 
    background: #7FC6A4; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 5px; 
 
    color: white; 
 
} 
 

 
.front { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 30px; 
 
} 
 

 
.back { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 20px; 
 
} 
 

 
.card:hover { 
 
    transform: rotateY(180deg); 
 
} 
 

 
.back { 
 
    transform: rotateY(180deg); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="fa fa-user"></span> 
 
    </div> 
 
    <div class="back">User</div> 
 
    </div> 
 
</div> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="fa fa-cogs"></span> 
 
    </div> 
 
    <div class="back">Settings</div> 
 
    </div> 
 
</div> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="front"> 
 
     <span class="fa fa-code"></span> 
 
    </div> 
 
    <div class="back">Code</div> 
 
    </div> 
 
</div>

我有卡翻蓋的一個簡單的CSS動畫。您能否告訴我爲什麼懸停時的動畫有時無法完成並回復？如果您嘗試在卡上懸停，您可能會發現，即使鼠標仍然懸停在卡上，卡有時會部分翻轉並返回。

Answer 1

更改此：

.card:hover { 
    transform: rotateY(180deg); 
} 

這樣：

.card-container:hover .card { 
    transform: rotateY(180deg); 
} 

編輯：

添加其他容器卡並添加保證金的權利，如下所示。

<div class="card-container"> 
    <div class="card-flipper"> 
      <div class="card"> 
       ... 
      </div> 
    </div> 
</div> 

CSS：

.card-flipper{ 
    margin-right:20px; 
}