CSS animation "Flinging" or shaking

Question

My idea is to put an invisible image on the page, which when in Hover, appears and triggers an animation.

The problem is that once I put the pointer under the image, the animation is shaking, starting and stopping several times a second. Is there any way to prevent that?

See here (Try taking and placing the image mouse)

.iconeslide {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
   opacity: 0.4;
} 

.iconeslide:hover {
    opacity: 1.0;
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
    animation-duration: 500ms;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

<img class="iconeslide" src="http://i.imgur.com/CaSWOIA.png"/>

Answer 1

I’ve been testing this on jsFiddle and managed to remove much of this unwanted effect from the blinking image by removing the value opacity of animation @-webkit-keyframes fadeInUp {0% {opacity: 0;}} and creating a wrapper pointing out the effect hover for this new element .imgContainer instead of the image itself.

But as I was digging deeper into the problem, I remembered in an easier and simpler way how you can do this effect. Here’s an example:

.imgContainer {
    border: 1px solid #000;
    width: 167px;
    height: 161px;
    position:relative;
    overflow: hidden; /* <-- Opcional. Faz com que a imagem não se sobreponha à linha inferior do quadrado */
}

/* Quando a imagem não está visivel, a imagem fica abaixo do "quadrado" */
.iconeslide {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
    opacity: 0;
    position:absolute;
    bottom:-50%; /* Aumenta/diminui este valor ao teu gosto */
} 

/* Mas ao passar o mouse por cima da class .imgContainer - mostra a imagem e coloca-a dentro do "quadrado" */
.imgContainer:hover .iconeslide {
    opacity: 1.0;
    bottom:0;
}

<div class="imgContainer">
    <img class="iconeslide" src="http://i.imgur.com/CaSWOIA.png"/>
</div>