CODEWITHSUNDEEP
htmlcss
Brendon Shaw
Brendon Shaw

Reputation: 298

Keeping a CSS attribute after an animation is completely finished

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?

Upvotes: 1

Views: 42

Answers (1)

Tom M
Tom M

Reputation: 2894

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>

Upvotes: 2

Related Questions