完成动画后保持CSS属性

Question

我需要这个项目的帮助。当我将鼠标悬停在textarea上时，框会展开：

body {
  background-color: black;
}
p {
  font-family: Sans-Serif;
  color:white;
}
@keyframes do {
  to {width: 500px; height: 100px;}
}
@keyframes undo {
  to {width: 50px; height: 50px}
}
#entering {
  animation-name: undo;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  text-align: left;
  width: 50px;
  height: 50px;
  border: none;
  font-family: Times;
  color: black;
  background-color: white;
	resize: none;
	overflow: hidden; 
}
/* The animation-fill-mode doesn't keep 
 * the width attribute for the zoom out
 * animation above.
 */
#entering:hover {
  animation-name: do;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
#text {
  width: 500px;
  height: 100px;
}

<div id = "text">
<textarea id = "entering">SAMPLE
</textarea>
</div>
<p>An example of my project.</p>

但是，我想这样做，以便在动画完成后，height和width属性保持不变，因此undo动画将起作用。什么是最面向CSS的解决方案？

Answer 1

对于这个用例，我建议在悬停时使用transition。

这种方式比使用动画更容易

#entering {
    transition: .5s ease;
}
#entering:hover {
   width: 500px;
   height: 100px;
}

完整代码：

body {
  background-color: black;
}
p {
  font-family: Sans-Serif;
  color:white;
}
#entering {
  transition: .5s ease;
  text-align: left;
  width: 50px;
  height: 50px;
  border: none;
  font-family: Times;
  color: black;
  background-color: white;
	resize: none;
	overflow: hidden; 
}
#entering:hover {
   width: 500px;
   height: 100px;
}
#text {
  width: 500px;
  height: 100px;
}

<div id = "text">
<textarea id = "entering">SAMPLE
</textarea>
</div>
<p>An example of my project.</p>