How to add a class, one by one, to each element in a list

So I want to add a class to each element in a list(specifically the <a> in the list items), but one at a time. I am doing this because the <a> have a CSS transition on them and I want to have them animate one at a time. So item1 animates, then item2 animates, then item3 animates... Here is what I could attempt to come up with so far.

html:

<ul>
    <li><a>item1</a></li>
    <li><a>item2</a></li>
    <li><a>item3</a></li>
    </ul>

jQuery/js:

animateItems();
function animateItems(){
       $('ul li a').each(function() {
          $(this).addClass('animate'); //This doesn't run one at a time
       });
    }

I feel like this is leading in the direction of recursion, but not sure really.

update: I just realized that this may be harder than i thought because jQuery needs to know about the css transition time doesnt it? Is there a way to add the classes with a setTimeout() until it begins the next addClass()? Does each() create an array or jQuery object that I can iterate through?