图标悬停减少过渡

Question

在悬停时我正在使用过渡来增加平滑图标.但问题是,当我将鼠标拖出图标时,它会立即恢复正常大小.我不知道如何通过减少图标来做同样的事情.我的意思是当我将鼠标拖出图标时,它应该转到正常大小并且具有相同的平滑过渡(不是即时).我希望你能理解我.这是我的代码:

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}

.facebook:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.instagram:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a>
			<a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li>
			<a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li>

Answer 1

您必须将过渡属性放在图标上,这样它不仅可以在悬停时使用.

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}

.facebook:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.instagram:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
  transition: all .2s ease-in-out 0s;
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a>
			<a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li>
			<a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li>