Why does this CSS3 Animation happen instantly?

Vote count:

0

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.

asked 50 secs ago

SimpleJ

425