如何过渡？

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