如何在頁面加載時使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