CSS3 - 即使在以下情况下也可以完成CSS3动画：hover isn＆not; true

Question

我有一个动画，当你将鼠标悬停在元素上时会激活它。当用户从元素中移除悬停时，这会立即导致动画返回到开头（不完成循环）。我希望动画循环完成然后停止动画。我怎样才能做到这一点？

这是我的动画：

.bg-img {
    background-image: url('http://url/images/animation/1.jpg');
    background-size: 350px 53.38px;
    width: auto;
    height: 50px;
    animation-play-state: paused; 
}

.bg-img:hover {
    animation-play-state: running;
    animation: giffy 1s infinite steps(1);
}

@keyframes giffy {
    2.857%   { background-image: url('http://url/images/animation/1.jpg'); } 
    5.714%   { background-image: url('http://url/images/animation/2.jpg'); } 
    8.571%   { background-image: url('http://url/images/animation/3.jpg'); } 
    11.428%   { background-image: url('http://url/images/animation/4.jpg'); } 
    14.285%   { background-image: url('http://url/images/animation/5.jpg'); } 
    17.142%   { background-image: url('http://url/images/animation/6.jpg'); } 
    19.999%   { background-image: url('http://url/images/animation/7.jpg'); } 
    22.856%   { background-image: url('http://url/images/animation/8.jpg'); } 
    25.713%   { background-image: url('http://url/images/animation/9.jpg'); } 
    28.570%   { background-image: url('http://url/images/animation/10.jpg'); } 
    31.427%   { background-image: url('http://url/images/animation/11.jpg'); } 
    34.284%   { background-image: url('http://url/images/animation/12.jpg'); } 
    37.141%   { background-image: url('http://url/images/animation/13.jpg'); } 
    39.998%   { background-image: url('http://url/images/animation/14.jpg'); } 
    42.855%   { background-image: url('http://url/images/animation/15.jpg'); } 
    45.712%   { background-image: url('http://url/images/animation/16.jpg'); } 
    48.569%   { background-image: url('http://url/images/animation/17.jpg'); } 
    51.426%   { background-image: url('http://url/images/animation/18.jpg'); } 
    54.283%   { background-image: url('http://url/images/animation/19.jpg'); } 
    57.140%   { background-image: url('http://url/images/animation/20.jpg'); } 
    59.997%   { background-image: url('http://url/images/animation/21.jpg'); } 
    62.854%   { background-image: url('http://url/images/animation/22.jpg'); } 
    65.711%   { background-image: url('http://url/images/animation/23.jpg'); } 
    68.568%   { background-image: url('http://url/images/animation/24.jpg'); } 
    71.425%   { background-image: url('http://url/images/animation/25.jpg'); } 
    74.282%   { background-image: url('http://url/images/animation/26.jpg'); } 
    77.139%   { background-image: url('http://url/images/animation/27.jpg'); } 
    79.996%   { background-image: url('http://url/images/animation/28.jpg'); } 
    82.853%   { background-image: url('http://url/images/animation/29.jpg'); } 
    85.710%   { background-image: url('http://url/images/animation/30.jpg'); } 
    88.567%   { background-image: url('http://url/images/animation/31.jpg'); } 
    91.424%   { background-image: url('http://url/images/animation/32.jpg'); } 
    94.281%   { background-image: url('http://url/images/animation/33.jpg'); } 
    97.138%   { background-image: url('http://url/images/animation/34.jpg'); } 
    100%   { background-image: url('http://url/images/animation/35.jpg'); }