如何动画苹果风格的CSS3关键帧？

Question

最近，我发表了一个关于使用此Mac产品浏览器动画构建jQuery的问题。这似乎很好，但是一些用户进入源代码，发现苹果正在使用带有关键帧的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-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，而剩下的一步仅仅是运动。它实际上是一个二维运动，z坐标总是0。