Question

我有以下问题。我创建了一个简单的图像列表，当我将其悬停在鼠标上时，希望将其隐藏起来。

代码如下：

  <div class="home-galery-eintrag">

        <img class="home-image" src="thumpnails/EchzellStra%C3%9Fenansicht1.jpg"> 
        <div class="home-galery-text">Kindertagesstätte Echzell - Wettbewerb</div>

  </div>



.home-image {

float: left;
width: 100%;
max-height: 800px;
min-height: 600px;
object-fit: cover;
object-position: center;
height: auto;
filter: brightness(100%);

}

.home-image:hover {

filter: brightness(65%);
transition: all .7s ease-in-out 0s;
-moz-transition: all .7s ease-in-out 0s;
-webkit-transition: all .7s ease-in-out 0s;
-o-transition: all .7s ease-in-out 0s;

}

它对于chrome和firefox很好用（尽管在ff中存在大小问题，但这不是重点），而不适用于野生动物园。好的，过渡确实有效，但是似乎它等待动画结束，直到可以开始新的过渡为止。像是不必要的延迟。

我不知道如何解决它，

Safari上的stutterin -webkit-transition动画

0 个答案: