css - 使 CSS 平滑动画转到 "both ways"？

Question

已经检查了大量答案，但找不到我需要的答案。我猜是因为我找不到合适的词来表达它!
我有一个高度设置为 80px 的 textarea，当你将鼠标悬停在它上面时，会出现一个平滑的 webkit它扩展到 310px 的动画。这一点工作正常，只是当您将鼠标从 textarea 上取下时，它会立即恢复为 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;
}

这确保所有高度变化(包括鼠标移出)都作为动画应用于文本区域，而不仅仅是悬停。

演示

http://jsfiddle.net/qd4fdfnd/