css - 如何在悬停时暂停css动画

Question

我正在尝试创建一个悬停时的 CSS 动画

1. 产生一种在照片上滑动的光泽，然后在下降 75% 处暂停

2. 稍微放大

我几乎可以正常工作，除了闪耀动画不会暂停它只是在移动照片后消失。我将如何暂停 CSS 动画？

这是代码：https ://jsfiddle.net/zq8vnLk9/14/

.team.team-overlay .team-item .team-avatar:before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
      
    }
    .team.team-overlay .team-item:hover .team-avatar:before {
    
      -webkit-animation: shine .95s;
    
      animation: shine .95s;
    }
    
    @-webkit-keyframes shine {
    
    from {
    
    left: -100%;
    
    }
    
    to {
    
    left: 30%;
    
    }
    
    }
    
    @keyframes shine {
    
    from {
    
    left: -100%;
    
    }
    
    to {
    
    left: 30%;
    
    }
    
    }
    
    
    .team2 {
    transition: transform .4s; /* Animation */
    transition-delay: .65s;
    }
    
    
    .team2:hover{
    transform: scale(1.1);
    }

<section class="team social-hover team-overlay">
<div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="team-item text-center">
          <div class="team-avatar team2" style={photoDiv}>
            <img class="img-responsive" style="height: 200px"src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg" alt=""/>
          </div>
        </div>
      </div>
    </div>
</div>
</section>

    
    
    

标签： csscss-animations