How to make animation right?

Question

JavaScript

I welcome everyone!
There is a markup:

<div class="header-page">
<h1>заголовок 1
<span>заголовок 2</span>
<span>заголовок 3</span>
<span>заголовок 4</span>
</h1>
</div>

The task is this, animation h1 and span.
1. Is my markup correct?
2. How is such animation done with Animate.css?
I just think that alternately adding the desired class to the tags.
Please do not scold the first time I try to do this.