0

squareup.comをロードすると、左側のフォームがどのようにアニメーション化されるかに注意してください。そのようなcss3アニメーションをどのように実行しますか？クラスアンロードを追加するにはJavaScriptが必要ですか？

ありがとう

4

2 に答える 2

2

純粋な CSS 3 アニメーションは、クリーンでシンプルで簡単なため、最善の方法です。

ただし、古いブラウザーは純粋な CSS 3 アニメーションをサポートしていないため、現時点では jQuery を使用することをお勧めします (より多くの人が CSS 3 アニメーションをサポートするようになるまで)。

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

#divId を div id 属性に置き換えます。次のように表示することを忘れないでください: none; div。

jQuery アニメーションについては、http://api.jquery.com/animate/にアクセスしてください。

于 2012-04-19T21:16:21.227 に答える
1

実際、ソース コードを確認したところ、その影響のほとんどは 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

于 2012-04-19T21:17:49.523 に答える