Skip to content

Instantly share code, notes, and snippets.

Last active July 29, 2018 13:57
Show Gist options
  • Save imkevinxu/4401674 to your computer and use it in GitHub Desktop.
Save imkevinxu/4401674 to your computer and use it in GitHub Desktop.
CSS Fade-In Content
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>CSS Fade-In Content</title>
<link rel="stylesheet" href="style.css">
<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>
<li><a href="" target="_blank">Pedro Ivo Hudson</a> for the <a href="" target="_blank">The Goodman</a></li>
<li><a href="" target="_blank">Kevin Xu</a> and his random free time</li>
<script src="//"></script>
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 */
.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);
Copy link

This is amazing. Thank you for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment