html - CSS动画边框进出

Question

我正在使用以下 CSS 为悬停时的边框设置动画:

.item {
  height: 250px;
  width: 250px;
  display: block;
  background: orange; 
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.item:hover {
  border: 8px solid green;
}

它适用于悬停，但当我将鼠标移出时，边框会消失而没有动画。是否也可以将边框滑出？

https://codepen.io/anon/pen/rwgZXp

Answer 1

您可以通过仅设置 border-width 动画来解决此问题

查看结果:

.item {
  height: 250px;
  width: 250px;
  display: block;
  background: orange;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  border: 0px solid green;
}

.item:hover {
  border-width: 8px;
}

<div class="item"></div>