制作一个CSS平滑动画"双向"？

Question

已经检查了大量的答案,但找不到我需要的答案.我想这是因为我找不到正确的话来说出来!

我有一个设置为高度为80px的textarea,当你将鼠标悬停在它上面时,会有一个平滑的webkit动画,它会扩展到310px.这个位工作正常,只是当你将鼠标从文本区域移开时,它会立即回到80px,这时最好再次平滑地压缩它.

我如何修改此代码以使其成功？

textarea
{
    width: 1100px;
    height: 80px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
    border-color: #000000;
    background-color : #000000;
    color: #FFFFFF;
    opacity: 0.7;
    font-family: "Times New Roman";
    vertical-align: middle;
}
textarea:hover
{
    font-weight: bold;
    font-size: 31px;
    border-radius: 10px;
    opacity: 1;
    width: 1100px;
    height: 310px;
    -webkit-transition: height 1s;
}

Answer 1

只需将过渡线放在textarea自身上,如下所示:

textarea
{
    width: 1100px;
    height: 80px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
    border-color: #000000;
    background-color : #000000;
    color: #FFFFFF;
    opacity: 0.7;
    font-family: "Times New Roman";
    vertical-align: middle;
    -webkit-transition: height 1s;
}
textarea:hover
{
    font-weight: bold;
    font-size: 31px;
    border-radius: 10px;
    opacity: 1;
    width: 1100px;
    height: 310px;
}

这可以确保所有高度变化(包括鼠标移出)都作为动画应用于textarea,而不仅仅是悬停.

DEMO

http://jsfiddle.net/qd4fdfnd/