页面加载中的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;
    }

当页面加载时显示元素并在稍后进行过渡时，我希望它们首先不可见，然后开始过渡