Hi, good day, I was hoping to ask how to put a delay in animation of some components in my webpage with CSS. Basically I have 3 links that animates on page load, but I was hoping to stagger the animation by around .5seconds for each link (link is encircled with a box border). Here's my code:

HTML:

   <nav class = "site-nav boxes">
            <ul>
                <div class="link"><li><a href="#">Home</a></li></div>
                <div class="link"><li><a href="#">Records</a></li></div>
                <div class="link"><li><a href="#">Contact Us</a></li></div>
            </ul>
        <div class = "fix"></div>
    </nav>

CSS:

.site-nav {
    position : relative;
    margin : 0px;
}

.site-nav ul {
    margin : 0px;
    padding : 0px;
}
.site-nav li {
    list-style : none;
    float : left;
    margin-right : 5px;
}

.site-nav a {
    display : block;
    text-decoration : none;
    color : green;
    padding : 10px 20px;
    border : 3px solid green;
    opacity: 0;
    animation: fadeBounce 1s forwards;
}

.boxes:nth-child(1) link{
    animation-delay: .5s;
}

.boxes:nth-child(2) link{
    animation-delay: 1s;
}

.boxes:nth-child(3) link{
    animation-delay: 1.5s;
}

It's not staggering, sorry for the newbie question, I'm still learning at the moment.. thanks for any help.