CSS3 Animation that fades in the content from the bottom up.
Demo here http://bl.ocks.org/4401674/
Full credit to Pedro Ivo Hudson for the The Goodman
Last active
July 29, 2018 13:57
-
-
Save imkevinxu/4401674 to your computer and use it in GitHub Desktop.
CSS Fade-In 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-In Content</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="fadeIn"> | |
| <h1>CSS Fade-In 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/ */ | |
| .fadeIn { | |
| opacity: 0; | |
| animation: fadeIn 1.8s forwards; | |
| } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is amazing. Thank you for sharing.