SOURCE

$('.g-container').mouseenter(function () {
    $(this).find('.g-nav-icon').removeClass('is-leave').addClass('is-enter');
})
$('.g-container').mouseleave(function () {
    $(this).find('.g-nav-icon').removeClass('is-enter').addClass('is-leave');
})

<div class="g-container">
    <i class="g-nav-icon g-lock-icon"></i>
</div>

 .g-container {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 200px;
     height: 200px;
     margin: auto;
     border-radius: 10px;
     background-color: #272d38;
     cursor: pointer;
     overflow: hidden;
 }
 
 .g-nav-icon {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -30px;
     margin-left: -30px;
     width: 60px;
     height: 60px;
     background-repeat: no-repeat;
     background-size: 100% auto;
     background-position: top;
 }
 
 .g-lock-icon {
     background-image: url(https://main.qcloudimg.com/raw/3eeffec2f2d634657d7cc889c2fa9491.png);
 }
 
 .g-nav-icon.is-leave {
     /* g-nav-icon-leave 动画名字 .3s一个周期 steps(16)是16格*60=960px长度 forwards 动画完成时，停留在最后一帧动画*/
     animation: g-nav-icon-leave .3s steps(16) forwards;
 }
 
 .g-nav-icon.is-enter {
     animation: g-nav-icon-enter .3s steps(16) forwards;
 }
 
 @keyframes g-nav-icon-leave {
     0% {
         background-position: 0 -960px;
     }
     100% {
         background-position: 0 0;
     }
 }
 
 @keyframes g-nav-icon-enter {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 0 -960px;
     }
 }