A minha ideia é colocar uma imagem invisível na página, que quando em hover, apareça e desencadeie uma animação.
O problema é que assim que eu coloco o ponteiro sob a imagem, a animação fica tremendo, começando e parando várias vezes por segundo. Existe alguma forma de prevenir isso?
Veja aqui (Experimente tirar e colocar o mouse da imagem)
.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"/>