如何在页面加载中使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动画，只需转到http://api.jquery.com/animate/

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