Created
June 23, 2011 19:05
-
-
Save jimjeffers/1043333 to your computer and use it in GitHub Desktop.
Apple's Elastic CSS Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- Apple nicely commented all of these transitions on their source file: | |
| http://images.apple.com/global/styles/productbrowser.css --> | |
| <style type="text/css" media="screen"> | |
| /* Just some basic presentational CSS for the example */ | |
| a { | |
| background: #000; display: block; color: #fff; | |
| font: 1.5em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; | |
| line-height: 1em; padding: 20px; position: absolute; top: 50%; left: 50%; | |
| text-align: center; margin-left: -75px; margin-top: -30px; | |
| height: 20px; text-decoration: none; width: 110px; opacity:1; | |
| } | |
| /* Here is the animation code. */ | |
| a { | |
| -webkit-animation-name:elastic-snap-to-point-from-apple; | |
| -webkit-animation-duration:.8s; | |
| } | |
| @-webkit-keyframes elastic-snap-to-point-from-apple { | |
| 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); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="#">Test</a> | |
| </body> | |
| </html> |
I'm thinking generated. Going to experiment to see if it can be done on the fly via JS.
I made a tool in CoffeeScript that can generate these animations now. Almost done with the tool but the easing equations to do it are up in a stand alone project: https://github.com/jimjeffers/Easie
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Do you think they generated this or wrote it by hand?