私は最近、 jQuery を使用してこの Mac 製品のブラウザー アニメーションを作成することに関する質問を公開しました。これは問題なく動作するように見えますが、一部のユーザーはソース コードを調べて、Apple がキーフレームで CSS3 アニメーションを使用していることに気付きました。ソースを調べましたが、これを機能させるのに苦労しています。どなたか覗いていただけると助かります。
下部のスライド パネル リンクには関心がないことに注意してください。最初にページをロードしたときに発生する最初のアニメーションのみです。すべてのアイテムがゴムのようにビューの外から製品ブラウザーに跳ね返ります。コードは、このページ ドキュメント内にあります: http://images.apple.com/global/styles/productbrowser.css
具体的には、169 ～ 340 行でキーフレーム アニメーションを示しています。誰かが構文を認識できることを期待して、コードの一部をコピーします。本当に感謝しています。
/* open browser animation */
.productbrowser.pb-dynamic ul:first-child li a { opacity:0; }
.productbrowser.pb-open ul:first-child li a { opacity:1; -webkit-animation-duration:.8s; -moz-animation-duration:.8s; -o-animation-duration:.8s; animation-duration:.8s; }
.productbrowser.pb-open ul:first-child li:nth-child(1) a { -webkit-animation-name:open-1; -moz-animation-name:open-1; -o-animation-name:open-1; animation-name:open-1; }
.productbrowser.pb-open ul:first-child li:nth-child(2) a { -webkit-animation-name:open-2; -moz-animation-name:open-2; -o-animation-name:open-2; animation-name:open-2; }
.productbrowser.pb-open ul:first-child li:nth-child(3) a { -webkit-animation-name:open-3; -moz-animation-name:open-3; -o-animation-name:open-3; animation-name:open-3; }
.productbrowser.pb-open ul:first-child li:nth-child(4) a { -webkit-animation-name:open-4; -moz-animation-name:open-4; -o-animation-name:open-4; animation-name:open-4; }
.productbrowser.pb-open ul:first-child li:nth-child(5) a { -webkit-animation-name:open-5; -moz-animation-name:open-5; -o-animation-name:open-5; animation-name:open-5; }
.productbrowser.pb-open ul:first-child li:nth-child(6) a { -webkit-animation-name:open-6; -moz-animation-name:open-6; -o-animation-name:open-6; animation-name:open-6; }
.productbrowser.pb-open ul:first-child li:nth-child(7) a { -webkit-animation-name:open-7; -moz-animation-name:open-7; -o-animation-name:open-7; animation-name:open-7; }
.productbrowser.pb-open ul:first-child li:nth-child(8) a { -webkit-animation-name:open-8; -moz-animation-name:open-8; -o-animation-name:open-8; animation-name:open-8; }
.productbrowser.pb-open ul:first-child li:nth-child(9) a { -webkit-animation-name:open-8; -moz-animation-name:open-8; -o-animation-name:open-8; animation-name:open-8; }
.productbrowser.pb-opened ul:first-child li a { opacity:1; }
/* keyframes
------------------------*/
/* open browser keyframes */
@-webkit-keyframes open-1 {
from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
25% { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
30% { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
35% { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
40% { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
45% { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
50% { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
55% { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
60% { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
65% { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
70% { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
75% { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
80% { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
85% { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
90% { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
to { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}