文章/答案/技术大牛

发布

社区首页 >问答首页 >动态页面转换

问动态页面转换
EN

Stack Overflow用户

提问于 2012-03-28 08:37:39

回答 1查看 880关注 0票数 0

我尝试在使用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;}
}

javascript

css

ajax

animation

css-transitions

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-28 14:19:43

使用translate3d(x，y，z)而不是空白处。这加快了动画的速度。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9899641

复制

相似问题

问动态页面转换
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态页面转换EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态页面转换
EN