使用CSS3关键帧

Question

I'm creating keyframes for a bounce effect when hovering a figure image. I have everything working correctly but once the animation is done.. the icons disappear.

I know it has to do with the translateY property set on the email and linked in class.

On hover, I tried adding the final translateY property but everything becomes glitchy...

Module Animation 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>

Icons 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);
}

Keyframe CSS

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

Hover 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

I'm at a loss on how to get this to work....I need the icons to not appear until the keyframes on hover bring them in and stay there till the user hovers off the figure.

Answer 1

Add forwards when calling the animaiton.

Updated Hover 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 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;
  }
}

By default, keyframes loop back when complete. Forwards is the animation-fill-property to prevent this.

You can learn more here:

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