动态页面过渡

Question

在使用 Ajax 加载和卸载内容时，我正在尝试使用 @keyframes 动画转换内容。目前有一个活跃的演示：Test Page

我想也许我可以不使用 JavaScript，但我不确定这是否可行？我在下面的 CSS 尝试中可能错了吗？

/* Animation Settings */
.aniDown {
z-index:0;
-webkit-animation-name: slideDown;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-direction:normal;
}

@-webkit-keyframes slideDown {
0%   { margin-top:-3000px; }
40%  { margin-top:-100px;  }
100% { margin-top:0px;     }
}

header a:active .aniDown, 
header a:focus .aniDown {
-webkit-animation-name: slideUp;
}

@-webkit-keyframes slideUp {
0%   {margin-top:0px;}
20%  {margin-top:-1000px;}
100% {margin-top:-3000px;}
}

Answer 1

使用 translate3d(x,y,z) 代替 margin-top。这样可以加快动画速度。

否则，我没有直接的答案，因为您的代码乍一看似乎是有效的。但是我写了一篇关于 CSS 动画的文章：http://samuli.hakoniemi.net/having-fun-with-css-keyframes/。也许你应该阅读它并比较你是否做错了什么。