html - 怎么过渡出去？

Question

对于以下代码，悬停时的动画效果很好。一旦我离开，它就会恢复到原来的大小。如何在失去焦点时实现过渡，以便在 div 中进出动画？

<style>
.border {
  border:1px solid black;
  width:500px;
}
.changesize:hover{
    width:250px;
    transition-property: width;
    transition-duration: 1000ms;
    transition-timing-function: ease-in;
}
</style>
<div class="border changesize">-- a div --</div>

http://scratchpad.io/caring-bead-826

Answer 1

添加以下样式(未悬停时用于 .changesize)

.changesize {
    transition-property: width;
    transition-duration: 1000ms;
    transition-timing-function: ease-in;
}