CSS animate border in and out

Question

I'm using the following css to animate a border on hover:

.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;
}

It works on hover but when I move the mouse out, the border disappears without an animation. Is it possible to slide the border out as well?

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

Answer 1

You can resolve the issue by animating only border-width

See result:

.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>

Answer 2

Add transparent border on .item and change color on hover.

.item {
  border: 8px solid transparent;
  background-clip: content-box;
}
.item:hover {
  border-color: green;
}

Also note the use of background-clip property. This will limit background color only to the content area excluding borders.

.item {
  height: 250px;
  width: 250px;
  display: block;
  background: orange; 
  border: 8px solid transparent;
  background-clip: content-box;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.item:hover {
  border-color: green;
}

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