[英]How to make a div animate in on page load?
notice how when you load squareup.com the form on the left animates in. How do you do a css3 animation like that? 请注意,当您加载squareup.com时,左侧的表单会进行动画处理。如何制作css3动画? Is javascript required to add some class unload?
是否需要javascript来添加一些类卸载?
Thanks 谢谢
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. 用您的div id属性替换#divId。 Don't forget to display: none;
不要忘记显示:无; the div.
div。
For jQuery animations simply go to http://api.jquery.com/animate/ 对于jQuery动画,只需转到http://api.jquery.com/animate/
Actually, after reviewing the source code, that effect appears to be mostly, if not all, CSS3. 实际上,在查看源代码之后,这种效果似乎主要是CSS3,即使不是全部。 Here's a snippet of the CSS:
这是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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.