如何为 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