CSS Handwriting Animation [duplicate]

Question

I'm building a landing page for a client with their logo in the center and their catchphrase directly below - however they want the catch phrase to be animated so that it looks as though it is being handwritten.

I have been struggling for days with this and have no clue how to do it - if someone could help me it would be such a lifesaver!

Here is the basic landing page with no animation on the catchphrase:

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

And the CSS:

body {
    background-color: #000;
}

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

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #FAEDE8;
margin-top: -40px;
}

And a JS Fiddle - https://jsfiddle.net/9297gefk/

Again, any help would be incredible!

Answer 1

I've created a JSFiddle of it, that will do the trick for you.

And for effect like this, using HTML5 is really good option as you've being suggested to use canvas.

Here you can change height & width of canvas and your CSS as per your need.

Source: Handwriting Effect.