0

I have an animation and it's activated when you hover over the element. When the user removes the hover from the element this instantly causes the animation to go back to the beginning (not finish the cycle). I want the animation loop to finish THEN stop the animation. How can i achieve this?

Here is my animation:

.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'); }
ConorReidd
  • 276
  • 5
  • 25
  • What if you hover out and then hover in again before the loop finishes? Anyway this is not possible with CSS alone. – Harry Oct 21 '16 at 15:31
  • I didn't say It needed to be only CSS. If you hover out and in really quickly it will still reset and start again :) – ConorReidd Oct 21 '16 at 15:33
  • Good then, I had that question because you didn't tag JS/jQuery. Here is a similar question and answer - http://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533. Your requirement is slightly different in the fact that you need it to reset on immediately hovering back in but I think you can build on from that example. – Harry Oct 21 '16 at 15:34
  • It looks to me that the default state is paused, so when you move off the element with your mouse it will pause. Maybe the hover state should be the play trigger, and you can set it to play through the whole animation. Try also set animation-iteration-count:infinite; on hover, animation-iteration-count: 1; as default. – St.G Oct 21 '16 at 15:37

0 Answers0