CODEWITHSUNDEEP
cssanimationcss-animations
Jake
Jake

Reputation: 1295

How To Animate Apple-Style CSS3 Keyframes?

I recently published a question about building this Mac product browser animation using jQuery. This seems to work fine, however some users went into the source code and found that Apple is using CSS3 animations with keyframes. I have looked over the source and I'm struggling to get this working. I would love any help if somebody can take a peek.

Apple page animation

Please note I am not interested in the bottom sliding panel links - only the first animation which happens when you initially load the page. All the items will bounce like elastic from out-of-view into the product browser. The codes are found inside this page document: http://images.apple.com/global/styles/productbrowser.css

Specifically lines 169-340 showcase the keyframe animations. I will copy over a chunk of the code in hopes that somebody will recognize the syntax. Thanks in advance for any help I truly appreciate it.

/* 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); }
}

Upvotes: 1

Views: 913

Answers (1)

vals
vals

Reputation: 64234

It is a pretty simple css syntax. you target an element

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

Here you are targeting an element that is the 4 child in a li that is the first child in a ul that is a descendant of an element with classes productbrowser and pb-open. To this element, you assign the animation open-4 (I have omitted vendor prefixes).

the animation duration is given generically for all the elements.

then the animation distributes the given time in percentages, 

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

From the first step, opacity is set to 1, and then tghe remaining step are only movements. it is really a 2 d movement, the z coordinates are always 0

Upvotes: 1

Related Questions