CSS3キーフレームの使用

Question

図形画像のホバリング時に、バウンス効果のキーフレームを作成しています。私はすべて正常に動作していますが、アニメーションが完了するとアイコンが消えます。

私は電子メールに設定されたtranslateYプロパティと関連があり、クラスにリンクされていることがわかります。ホバーで

、私は、最終的な移動Yプロパティを追加しようとしたが、すべてがグリッチなり...

モジュールアニメーションHTML

<div class="team-container"> 
     <figure> 
      <div class="circle-item"> 
      <img class="member-image" src="http://sandbox.techgrayscale.com/wp-content/uploads/2016/07/member-image-blank.png"> 
      <div class="image-cover"> 
      </div> 
       <div class="icons"> 
       <a class="email" href="#"><img src="http://sandbox.techgrayscale.com/wp-content/themes/TGSnew/assets/images/email-icon.png"></a> 
       <a class="linkedin" href="#"><img src="http://sandbox.techgrayscale.com/wp-content/themes/TGSnew/assets/images/linkedin-icon.png"></a> 
       </div> 
      <!--end image cover --> 
      </div> 
      <!--end circle item --> 
     </figure> 
     </div> 

アイコンCSS

.tgs-team figure .circle-item .icons { 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
} 
.tgs-team figure .circle-item .icons:after { 
    content: ''; 
    width: 1px; 
    height: 0; 
    position: absolute; 
    background-color: #fff; 
    left: 50%; 
    bottom: -50%; 
    transition: height .3s linear; 
} 
.tgs-team figure .circle-item .icons a { 
    display: inline-block; 
} 
.tgs-team figure .circle-item .icons .email { 
    margin-right: 20px; 
    transform: translateY(120px); 
} 
.tgs-team figure .circle-item .icons .linkedin { 
    margin-left: 20px; 
    transform: translateY(120px); 
} 

キーフレームCSS

@keyframes iconBounce { 
    0% { 
    transform: translateY(120px); 
    opacity: 0; 
    } 
    50% { 
    transform: translateY(0px); 
    opacity: 1; 
    } 
    75% { 
    transform: translateY(-10px); 
    } 
    100% { 
    transform: translateY(0px); 
    } 
} 

ホバーCSS：

.tgs-team figure:hover .image-cover { 
    transform: translateY(0); 
    transition: transform .3s ease-out; 
    } 
    .tgs-team figure:hover .icons:after { 
    height: 88px; 
    } 
    .tgs-team figure:hover .icons .email { 
    animation: iconBounce .40s linear .1s; 
    } 
    .tgs-team figure:hover .icons .linkedin { 
    animation: iconBounce .40s linear .2s; 
    } 
    .tgs-team .member-info .name { 
    font-size: 1.875rem; 
    } 
    .tgs-team .member-info .position { 
    font-weight: 100; 
    } 
} 

Codepen

私は私がするまで表示されないようにアイコンが必要....この作業を取得する方法についての損失によホバー上のキーフレームは、ユーザーを持ち込んで、ユーザーがフィギュアから外れるまでそこにとどまります。

Answer 1

を追加すると、animaitonを呼び出すときにが呼び出されます。

は、キーフレームのループバック時にデフォルトで完全

.tgs-team figure:hover .image-cover { 
    transform: translateY(0); 
    transition: transform .3s ease-out; 
    } 
    .tgs-team figure:hover .icons:after { 
    height: 88px; 
    } 
    .tgs-team figure:hover .icons .email { 
    animation: iconBounce .40s linear .1s forwards; 
    } 
    .tgs-team figure:hover .icons .linkedin { 
    animation: iconBounce .40s linear .2s forwards; 
    } 
    .tgs-team .member-info .name { 
    font-size: 1.875rem; 
    } 
    .tgs-team .member-info .position { 
    font-weight: 100; 
    } 
} 

ホバーCSSを更新しました。 Forwardsは、これを防ぐためのアニメーション塗りつぶしプロパティです。

あなたはここで多くを学ぶことができます。

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp