html - CSS3 变换动画

Question

我的 CSS3 动画似乎在Chrome中不起作用。我的页面上有其他动画。有什么我想念的吗？这是我的代码：

@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

它不起作用，因为您需要-webkit-transform例如：

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

和

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