CSS анимации при загрузке страницы с отображением элементов

Question

у меня есть элементы

<li style="animation-delay:0.5s"><a href="">Events</a></p></li>
<li style="animation-delay:1s"><a href="">Productivity</a></p></li>
<i class="icon-signout"></i><a  style="animation-delay:1.5s"id="logout" href={{url('logout')}}">Logout</a>

это ключевые кадры анимации

 @keyframes sidebarmove{
        from{opacity:0;}
        to{opacity:1;}
    }

CSS

#logout,.sidebar-nav li{
        margin-bottom: 25px;
        color: black;
        width: 127% ;
        animation: 0.5s  sidebarmove forwards;
    }

Когда страница загружается, элементы отображаются и переход происходит позжеиз которых я хочу, чтобы они сначала не были видны, а затем начали переход