Keeping a CSS attribute after an animation is completely finished - html

Question

I need help with this project. When I hover over the textarea, the box expands:
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>
However, I want to make it so that after the animation is completely finished, the height and width attributes stay the same so the undo animation will work. What is the most CSS oriented solution?

Answer 1

For this use case, I'd suggest using a transition on hover instead.
This way is easier than going with animation
#entering {
transition: .5s ease;
}
#entering:hover {
width: 500px;
height: 100px;
}
full code:
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>