在使用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;}
}
答案 0 :(得分:2)
使用translate3d(x,y,z)代替margin-top。这加速了动画。
否则,我没有直接回答,因为您的代码乍一看似乎有效。但是我写了一篇关于CSS动画的文章:http://samuli.hakoniemi.net/having-fun-with-css-keyframes/。也许你应该阅读它并比较你是否做错了。