Skip to content

Instantly share code, notes, and snippets.

Last active December 10, 2015 07:38
Show Gist options
  • Save imkevinxu/4402060 to your computer and use it in GitHub Desktop.
Save imkevinxu/4402060 to your computer and use it in GitHub Desktop.
CSS Fade-Out Content
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>CSS Fade-Out Content</title>
<link rel="stylesheet" href="style.css">
<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>
<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 */
.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