I'm in the process of developing a landing page for a client. Their logo is prominently centered with the company slogan displayed directly underneath. At present, the slogan elegantly fades into view upon loading the page.
Recently, they expressed interest in having the slogan animated to give the appearance of being written out instead of simply fading in. I'm struggling to figure out how to achieve this effect. Any creative ideas or suggestions would be greatly appreciated.
Here is the HTML code snippet:
<div class="image-wrapper">
<a href="home.html">
<img src="images/landing_logo2.png" />
</a>
<div id="test">
<p>enter the sunshine state</p>
</div>
</div>
This is the CSS style used:
div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
display: block;
}
#test {
position: absolute;
top: 100%;
width: 100%;
}
#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #fff;
margin-top: -40px;
-webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 8s; /* Firefox < 16 */
-ms-animation: fadein 8s; /* Internet Explorer */
-o-animation: fadein 8s; /* Opera < 12.1 */
animation: fadein 8s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
A JSFiddle example can be found here: