Animation Sync Help

by Harry Dry

HTML

<script src="https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.css">
<!--So my problem is these two animations are fading in at two differnt times. I'm aware I could sync them via trial and error but this is not a workaround (as the actual animation is much more complicated than this). I need to sync them by somehow having the same animation delay.
The problem seems to be that the .tester animation waits until the text has stopped typing to run.    -->
<div id="typed-strings">
    <p>Forget originality.^500 The term is overrated.^500<br> 
   <span class='tester'>Ideas aren't original</span>. Ideas are made from stuff.<br>
    </p>
    </div>
<span id="typed"></span>


<span class="line1 animated fadeIn">Jim Jarmusch</span>

CSS

#typed {
	font-family: crimson-text;
	font-style: normal;
	font-weight: 400;
	color: #000000;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
}
.tester{
    animation-name: highlight;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    background-color: transparent;
}

@keyframes highlight{
    from {background-color: transparent;}
    to {background: rgba(199, 220, 101, 0.4);}
}
@-webkit-keyframes highlight{
    from {background-color: transparent;}
    to {background: rgba(199, 220, 101, 0.4);}
}
@-moz-keyframes highlight{
    from {background-color: transparent;}
    to {background: rgba(199, 220, 101, 0.4);}
}

.typed-cursor{
  opacity: 0;
}

.line1 {background-color: rgba(199, 220, 101, 0.4);  animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 2s;}

JavaScript

$(function(){
        $("#typed").typed({
            stringsElement: $('#typed-strings'),
        });
    });