Why does this CSS3 Animation happen instantly?

Problem

I'm having issues with this CSS3 animation:

@-webkit-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@-moz-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@-ms-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
} 

Here's the element:

.activity .card.invisible {
  width: 0px;
  border-width: 0px;
  margin: 0px;
  opacity: 0;
  -webkit-animation-name: hide_card;
  -moz-animation-name: hide_card;
  animation-name: hide_card;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1; 
}

In my Javascript, I am adding the invisible class using JQuery, and the element becomes hidden (and the class is added in the inspector), but it does it instantly without animating.

Any help would be greatly appreciated, and I can supply more information as needed.

Problem courtesy of: SimpleJ

Solution

Yes, you need to add the animation rules to the card before it gets the .invisible class. so it would look something like this I guess:

.activity .card {
  transition: all 1s ease 1s;
  width: 250px;
  margin-left: 10px;
  margin-right: 10px;
  border-width: 3px;
}

.activity .card.invisible {
  width: 0px;
  border-width: 0px;
  margin: 0px;
  opacity: 0; 
}

I used the shorthand and omitted vendor prefixes...

Solution courtesy of: climbinghobo

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.