CSS animation "Flickering" or tremendous

Question

CSS animation "Flickering" or tremendous

Navigation

#1 by (1 votes)

1

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

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

See here (Try dragging and dropping the mouse from the image)

.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"/>

html css

asked by anonymous 01.07.2015 / 18:42

1 answer

Plugin shortcut, incompatibility Run function with timer in Javascript / Jquery

score 1 · Accepted Answer

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

But as I was digging more into the problem, I was reminded of an easier and simpler way of doing this. 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>