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