Skip to content

Instantly share code, notes, and snippets.

@veganaize

veganaize/css_dejank.html

Last active August 30, 2019 18:11
Show Gist options
  • Save veganaize/698a6ee9859345af4ada64b619374faa to your computer and use it in GitHub Desktop.
Save veganaize/698a6ee9859345af4ada64b619374faa to your computer and use it in GitHub Desktop.
Download ZIP
CSS de-jank (originally by Hunter Logan)
Raw
css_dejank.html
<!DOCTYPE html>
<head>
<!-- Originally implemented by Hunter Logan -->
<style>
body {
visibility: hidden;
opacity: 0;
-webkit-animation: fadein .6s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein .6s; /* Firefox < 16 */
-ms-animation: fadein .6s; /* Internet Explorer */
-o-animation: fadein .6s; /* Opera < 12.1 */
animation: fadein .6s;
}
</style>
<!-- REST OF HEAD BELOW -->
</head>
<body>
<!-- CONTENT HERE -->
<h1>Hello World</h1>
<style>
/* At bottom of stylesheet or page */
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
body {
visibility: visible;
opacity: 1;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment