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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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