CSS3 Animation that fades out the content going up.
Demo here http://bl.ocks.org/4402060/
Full credit to Pedro Ivo Hudson for the The Goodman
Last active
December 10, 2015 07:38
-
-
Save imkevinxu/4402060 to your computer and use it in GitHub Desktop.
CSS Fade-Out Content
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>CSS Fade-Out Content</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="fadeOut"> | |
| <h1>CSS Fade-Out Content</h1> | |
| <p><strong>Bacon ipsum dolor sit</strong> amet tongue filet mignon shankle meatball pig turducken, chuck short ribs venison swine. Tri-tip chuck pig, ribeye corned beef meatloaf sirloin chicken short ribs venison spare ribs. Boudin filet mignon pastrami tongue salami kielbasa brisket sirloin t-bone corned beef biltong ham hock. Kielbasa strip steak bresaola, venison frankfurter meatloaf ground round ribeye beef ribs swine chuck spare ribs.</p> | |
| <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 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/ */ | |
| .fadeOut { | |
| opacity: 0; | |
| -webkit-animation: fadeOut .8s; | |
| } | |
| @-webkit-keyframes fadeOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-20px); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment