Can't stop animation fro cycling

Question

I have three images in a row. I want to enlarge the one that the mouse is over until the mouse is moved off of it. This sort of works in my jsfiddle but, as you can see, the animation doesn't stop after enlarging. The other threads on this problem say to set the iteration count and forwards options, which I've done. The only other solution I could find was to use javascript to control it. Is there a way to do this with just css? Here's my code:

    <style>

    #set2 {margin-left:40px; display:inline-block}
    #set2:hover {
      -webkit-animation: enlarge 5s;
      animation: enlarge 5s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
    @-webkit-keyframes enlarge {

      25% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
      }
    }

    </style>

    <div class="banner_set">
      <ul class="nav">
        <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li>
        <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li>
       </ul>
    </div>

Answer 1

Your keyframe set at 25% means your element will be scaled 1/4 of the way through the animation, then not scaled at the end. If you just want a smooth scale up and that's all, use 100% (and I would suggest, reduce the duration!).

I updated your fiddle. The weird image styling is so we can see your images.

#set2 {margin-left:40px; display:inline-block}
#set2:hover {  
  -webkit-animation: enlarge 2s;
  animation: enlarge 2s 1 forwards;
}
@-webkit-keyframes enlarge {
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  
}

img {
  min-height: 30px;
  min-width: 30px;
  border: 3px solid red;
}

<div class="banner_set">
  <ul class="nav">
    <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li>
    <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li>
    <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li>
   </ul>
</div>

Answer 2

Is there a specific reason you're using the animation approach rather than a transition?

Since the desired behavior is to toggle between two animated states, perhaps the transition is an easier way to approach it.

Using your example code:

.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {  
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 500ms ease-in;
    -webkit-transform: scale(2.1);
    -ms-transition: all 500ms ease-in;
    -ms-transform: scale(2.1);   
    -moz-transition: all 500ms ease-in;
    -moz-transform: scale(2.1);
    transition: all 500ms ease-in;
    transform: scale(2.1); 
}
.nav-items img {
   -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
}

<div class="banner_set"> 
 
  <ul class="nav">
    <li id="0" class="nav-items small_0"><a href="example.com"><img src="http://placehold.it/200x200"></a></li>
    <li id="1" class="nav-items small_1"><a href="example.com"><img src="http://placehold.it/200x200"></a></li>
    <li id="2" class="nav-items small_2"><a href="example.com"><img src="http://placehold.it/200x200"></a></li>
   </ul>
   </div>