CSS3变换动画

Question

My CSS3 animation doesn't seem to be working in Chrome . I have other animations which are working on my page. Is there anything I'm missing or such? Here is my code:

@keyframes upToDown {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@-webkit-keyframes upToDown {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes downToUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@-webkit-keyframes downToUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

.hide{
 animation: upToDown 1s forwards;
 -webkit-animation: upToDown 1s forwards;
-webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.visible{
 animation: downToUp 1s forwards;
  -webkit-animation: downToUp 1s forwards;
-webkit-transform: translateY(0);
  transform: translateY(0);
}

Answer 1

It isn't working because you need -webkit-transform eg:

@-webkit-keyframes downToUp {
0%   { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(0); }
}

and

@-webkit-keyframes upToDown {
0%   { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(100%); }
}