Animação de manuscrito CSS [duplicado]

Esta pergunta já tem uma resposta aqui:

Como posso animar o desenho de texto em uma página da web? 3 respostas

Estou criando uma página de destino para um cliente com o logotipo no centro e o slogan diretamente abaixo - no entanto, eles querem que o slogan seja animado para parecer que está sendo manuscrito.

Estou lutando há dias com isso e não tenho idéia de como fazê-lo - se alguém pudesse me ajudar, seria um salva-vidas!

Aqui está a página de destino básica sem animação no slogan:

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

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

E um JS Fiddle -https://jsfiddle.net/9297gefk/

Mais uma vez, qualquer ajuda seria incrível!

questionAnswers(0)

yourAnswerToTheQuestion