如何为Apple风格的CSS3关键帧制作动画？

Question

我最近发布了一个关于使用jQuery构建this Mac product browser animation的问题。这似乎工作正常，但是一些用户进入源代码并发现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); }
}

Answer 1

这是一个非常简单的css语法。你定位一个元素

.productbrowser.pb-open    ul:first-child li:nth-child(4)    a {animation-name:open-4; }

在这里，您的目标是一个元素，它是li中的第4个子元素，它是ul中的第一个子元素，它是具有productbrowser和pb-open类的元素的后代。对于此元素，您将动画分配为open-4（我已省略供应商前缀）。

动画持续时间通常用于所有元素。

然后动画以百分比分配给定时间，

@-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); }

从第一步开始，不透明度设置为1，然后剩下的步骤仅为移动。它实际上是一个2 d运动，z坐标总是0