Skip to content

Instantly share code, notes, and snippets.

@braddalton
Last active April 16, 2019 14:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save braddalton/979304864a63218cabf7ef0ccef24c32 to your computer and use it in GitHub Desktop.
Save braddalton/979304864a63218cabf7ef0ccef24c32 to your computer and use it in GitHub Desktop.
Fade In Text Effect
<h2>The legal world is complex … </h2>
<div class="fade">
<p>We will help you find your way.</p>
</div>
.fade p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 20s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 20s; /* Firefox < 16 */
-ms-animation: fadein 20s; /* Internet Explorer */
-o-animation: fadein 20s; /* Opera < 12.1 */
animation: fadein 20s;
}
@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; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment