javascript 如何在页面加载时制作 div 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10236785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div animate in on page load?
提问by Rachela Meadows
notice how when you load squareup.comthe form on the left animates in. How do you do a css3 animation like that? Is javascript required to add some class unload?
注意当你加载squareup.com时左边的表单是如何动画的。你如何做这样的 css3 动画？添加一些类卸载是否需要javascript？
Thanks
谢谢
回答by
Pure CSS 3 animation would be the best way to go - since it's clean, simple and easy.
纯 CSS 3 动画将是最好的方法——因为它干净、简单和容易。
However, older browsers wont support pure CSS 3 animation so you might be best off with jQuery for now (untill more people support CSS 3 animations perhaps).
但是，较旧的浏览器不支持纯 CSS 3 动画，因此您现在最好使用 jQuery（直到更多人支持 CSS 3 动画）。
<script>
$(function(){
// make a basic fadeIn animation
$("#divId").fadeIn();
});
</script>
Replace #divId with your div id attribute. Don't forget to display: none; the div.
将#divId 替换为您的 div id 属性。不要忘记显示：none; div。
For jQuery animations simply go to http://api.jquery.com/animate/
对于 jQuery 动画，只需访问http://api.jquery.com/animate/
回答by j08691
Actually, after reviewing the source code, that effect appears to be mostly, if not all, CSS3. Here's a snippet of the CSS:
实际上，在查看源代码后，该效果似乎大部分（如果不是全部）都是 CSS3。这是 CSS 的一个片段：
.square-signup-form h1, .square-signup-form .pricing-prop, .square-signup-form p, .square-signup-form .instructions, .square-signup-form .cards-accepted, .cardcase-signup-form h1, .cardcase-signup-form .pricing-prop, .cardcase-signup-form p, .cardcase-signup-form .instructions, .cardcase-signup-form .cards-accepted {
color: #fff;
-moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
-webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
-o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
.square-scene .square-signup-form {
-moz-transform: translate(0pt, 0pt);
opacity: 1;
z-index: 3;
}
.ie8 .square-scene .square-signup-form {
display: block;
}
You can view the full CSS at https://d1g145x70srn7h.cloudfront.net/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css
您可以在https://d1g145x70srn7h.cloudfront.net/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css查看完整的 CSS
Here's a copy that's easier to read: http://pastebin.com/gHTn1YuA
这是一个更容易阅读的副本：http: //pastebin.com/gHTn1YuA
