已经查阅了很多答案,但是找不到我需要的。我猜这是因为我找不到正确的表达方式!
我有一个文本区域,高度设置为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;
}