如何在页面加载时使div生成动画？

Question

注意当你加载squareup.com这个表格在左边的动画中时怎么做？你如何做一个css3动画？ JavaScript需要添加一些类卸载？

感谢

Answer 1

纯CSS 3动画将是最好的方式去 - 因为它的清洁，简单和容易。

但是，旧版浏览器不会支持纯CSS 3动画，所以现在可能最好用jQuery（直到更多人支持CSS 3动画）。

<script> 
$(function(){ 
     // make a basic fadeIn animation 
     $("#divId").fadeIn(); 
}); 
</script> 

用你的div id属性替换#divId。不要忘记显示：无; div。

jQuery的动画干脆去

Answer 2

实际上，审查源代码后，该效应似乎主要是，如果不是全部，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; 
} 

您可以在https://d1g145x70srn7h.cloudfront.net/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css

查看完整的CSS这里有一个副本更易于阅读：http://pastebin.com/gHTn1YuA