html - CSS3 缩放动画重置

Question

CSS3 过渡会立即重置，即使我仍在悬停它。当鼠标悬停在它上面时，任何人都可以帮助我使它永久化而不是重置吗？

.grow {
  -webkit-transition: all .2s ease-in-out;
}
.grow:hover {
  -webkit-transform: scale(1.1);
}

<a class="logo-icon grow" href="#">
  <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="logo">
</a>

Answer 1

你的链接搞砸了，因为它是 display: inline。

.grow { 
    -webkit-transition: all .2s ease-in-out;
    display: block; /* or display: inline-block; */
}

.grow:hover { 
    -webkit-transform: scale(1.1);
}

<a class="logo-icon grow" href="#">
  <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="logo">
</a>

但为什么呢？

内联元素不会扩展到其内容的高度。 block 元素做: