Make a CSS smooth animation go "both ways"?

Question

Checked a load of answers already but can't find many for what I need. I guess it's because I can't find the right words to say it!

I have a textarea that is set to have a height of 80px, and when you hover over it there is a smooth webkit animation in which it expands to 310px. This bit works fine, it's just that when you take the mouse off of the textarea it instantly goes back to being 80px, when it would be best to have it smoothly compact again.

How would I modify this code to make it do that?

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;
}

Answer 1

Just place your transition line on the textarea itself, like this:

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;
}

This ensures that all height changes (including the mouse out) are applied as animation on the textarea, not just on hover.

DEMO

http://jsfiddle.net/qd4fdfnd/

Answer 2

This is because your -webkit-transition is on the :hover selector, so when :hover isn't active, transitions aren't enabled. Move the -webkit-transition to textarea rather than textarea:hover to make it work as you expect.

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

Answer 3

You need to place the 'transition' on the element itself, and not the hover itself (since this will only be there when the mouse is hovered, and not 'all the time').

Also, as mentioned previously, you should get out of the habit of including 'redundant properties' in the :hover pseudo selector. There you should only include the properties that are actually changing on the hover.

So, a sample of your code should be more like:

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>

Notice i've also included an unprefixed version of the transition property (to enable cross browser compatibility).