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

你的 link 搞砸了，因为它是 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>

但是为什么呢？

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

CSS3 缩放动画重置

CSS3 Scale animation resets

html

css

css-animations

但是为什么呢？