Insert and exit CSS animations

Question

I use the following css to animate the 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 with hovering, but when I exit the mouse, the border disappears without animation. Is it also possible to draw a border?

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

Answer 1

You can solve the problem by animating only border-width

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>

Run codeHide result

Answer 2

Add a transparent border to .itemand change the color on hover.

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

Also note the use of the property background-clip. This will limit the background color to the content area only, with the exception of 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>

Run codeHide result

Answer 3

, , , .

, , , .

- border:0 solid green;. 0 8 0 .

Answer 4

div . . div add box-sizing: border-box...

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

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

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

Hide result

Answer 5

border: 0px solid green; .item.

Answer 6

, . . , , , . , 0px, .

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

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

, , .