CSS3 Animation that bounces into the air any element naturally.
Demo here http://bl.ocks.org/4402301/
Full credit to Pedro Ivo Hudson for the The Goodman
Last active
December 10, 2015 07:38
-
-
Save imkevinxu/4402301 to your computer and use it in GitHub Desktop.
CSS Bounce Effect
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>CSS Bounce Effect</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>CSS Bounce Effect</h1> | |
| <div class="circle bounce"></div> | |
| <img class="bounce" src="http://placekitten.com/130/130" alt="Place Kitten Cuteeee"> | |
| <h2>Credits</h2> | |
| <ol> | |
| <li><a href="https://github.com/podrivo" target="_blank">Pedro Ivo Hudson</a> for the <a href="http://thegoodman.cc/" target="_blank">The Goodman</a></li> | |
| <li><a href="https://gist.github.com/imkevinxu" target="_blank">Kevin Xu</a> and his random free time</li> | |
| </ol> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 500px; | |
| margin: 50px auto; | |
| color: #444; | |
| } | |
| h1, h2 { font-weight: 400; } | |
| p, li { line-height: 23px; } | |
| a { color: steelBlue; } | |
| a:not(:hover) { text-decoration: none; } | |
| /* Uses -prefix-free for cleaner unprefixed CSS | |
| http://leaverou.github.com/prefixfree/ */ | |
| .circle { | |
| background: #FA8072; | |
| width: 130px; | |
| height: 130px; | |
| border-radius: 65px; | |
| margin: 50px; | |
| display: inline-block; | |
| } | |
| img { | |
| border-radius: 65px; | |
| margin: 50px; | |
| display: inline-block; | |
| } | |
| .bounce { | |
| animation: bounce 1s .5s; | |
| transform: scale(0.85); | |
| } | |
| @keyframes bounce { | |
| 0% { transform: scale(1.1); opacity: 1 } | |
| 50% { transform: scale(1.6); opacity: .7; } | |
| 60% { transform: scale(0.6); opacity: 1 } | |
| 80% { transform: scale(0.95) } | |
| 100% { transform: scale(0.85) } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment