CSS Text Written Out Animation

Question

I'm building a landing page for a client. Their logo is centered with the company slogan directly underneath, and currently the slogan fades in on page load.

They are now asking if the slogan can be animated to look as though it is being written out as opposed to fading in. Does anyone have an idea on how to achieve this effect? I'm stumped.

Any help would be greatly appreciated.

HTML:

<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>

CSS:

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; }
}

I've attached a JSFiddle:

https://jsfiddle.net/1r3fuk27/

Answer 1

Without using external libraries, you can simply do it with this approach.

var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
  (function(i) {
    setTimeout(function() {
      $('#test > p').text(slogan.substring(0, i + 1));
    }, 100 * i);
  }(i));
}

@font-face {
  font-family: segoe;
  src: url(fonts/segoesc.ttf);
}
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%;
  text-align: center;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 18px;
  text-align: center;
  color: #000;
  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;
  }
}
/* 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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-wrapper">
  <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

If the text is not visible in the snippet here is the fiddle