Как предотвратить это двойное зависание?

Question

Я использовал эффект CSS3, где черный ящик масштабируется до 0,25 в верхнем левом углу при наведении мыши.

Проблема, с которой я сталкиваюсь, заключается в том, что когда-то зависало, начинается анимация, и если указатель мыши все еще находится в пределах диапазона черного ящика (и наводится на него), анимация снова перезапускается из существующей точки. Это предотвращает плавный переход. Как это можно решить?

This link contains the black box

Ниже приведен код. Обратите внимание, что черный ящик завернут в образ-эффект CSS clas.

.image-effect { 
    animation-name: slideUp; 
    transition: all 0.5s; 
    -webkit-animation-name: slideUp; 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s; 
    animation-timing-function: ease; 
    -webkit-animation-timing-function: ease; 
} 

.image-effect:hover { 
    transform: scale(0.25) ; 
    transform-origin: top left; 
    overflow: hidden; 
} 

Заранее спасибо.

Answer 1

Вам нужно добавить родительский элемент, который содержит зависание, но не преобразуется. Ваш CSS будет в конечном итоге выглядеть примерно так:

.parent-element:hover .image-effect { 
    transform: scale(0.25) ; 
    transform-origin: top left; 
    overflow: hidden; 
} 

Answer 2

проверить эту скрипку http://jsfiddle.net/7wdqmhrd/

Target внутренний DIV элемент с эффектом вместо вроде следующий:

.image-effect div { 
    animation-name: slideUp; 
    transition: all 0.5s; 
    -webkit-animation-name: slideUp; 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s; 
    animation-timing-function: ease; 
    -webkit-animation-timing-function: ease; 
} 
.image-effect:hover div { 
    transform: scale(0.25); 
    transform-origin: top left; 
    overflow: hidden; 
} 

Надеется, что это помогает!

Answer 3

1) Добавить внутренний DIV тег

<div class="image-effect"> 
    <div> // Beginning Tag Added 
     <a href="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png"><img class="size-full wp-image-225 alignleft" src="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png" alt="bg1" data-id="225"></a> 
    </div> // Ending Tag Added 
</div> 

2) Просто добавьте Div тег в обоих классах

.image-effect div 
.image-effect:hover div 

Потому что вы хотели, чтобы перемещать внутренний DIV.