让CSS平滑动画“双向”进行？

Question

已经查阅了很多答案，但是找不到我需要的。我猜这是因为我找不到正确的表达方式！

我有一个文本区域，高度设置为80px，当你将鼠标悬停在上面时，会出现平滑的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;
}

- String

---

一个好的设计策略是不要在 hover 属性中重复那些没有改变的属性。如果基类已经设置了 font-weight 为 bold，那么不要再次设置。同样的道理也适用于 border-radius 或 width。 - vals

@vals 很好的建议，我现在会进行更改。 - String

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/

- PoeHaH

Answer 2

这是因为你的-webkit-transition在:hover选择器上，所以当:hover未激活时，转换不会启用。将-webkit-transition从textarea:hover移动到textarea，以使其按照您的预期工作。

textarea {
    height: 80px;
    -webkit-transition: height 1s;
}
textarea:hover {
    height: 310px;
}

- Nathan MacInnes

Answer 3

你需要将“transition”放在元素本身上，而不是放在“hover”上（因为这只有在鼠标悬停时才会出现，而不是“一直存在”）。

同样地，正如之前提到的，你应该摆脱在“:hover”伪选择器中包含“冗余属性”的习惯。在那里，你只应该包含在悬停时实际发生变化的属性。

因此，你的代码示例应该更像：

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;
  transition: height 1s;
}
textarea:hover {
  height: 310px;
}

<textarea></textarea>

请注意，我还包括了一个未加前缀的转换属性版本（以实现跨浏览器兼容性）。

- jbutler483