css3多个动画的执行问题

Question

1、用react做的h5项目，有一个按钮和菜单 需要做一个淡入淡出的效果 点击按钮淡入 再点淡出
2、用css3做的动画，貌似动画执行的时候两个动画同时执行了，我想点击一次执行淡入再点淡出 这个能通过css3来做吗 还是说必须得js
.link-lists {

        width: 100%;
        position: fixed;
        top: 50px;
        bottom: 0;
        z-index: 2;
        background-color: rgba(255,255,255,0.9);
        -webkit-animation: fadeIn .8s ease-in,fadeOut .8s ease-out;
        li {
            height: 75px;
            line-height: 75px;
            list-style: none;
            text-align: center;
            border-bottom: 1px solid #ccc;
            a {
                color: #000;
                display: block;
            }
        }
    }

Answer 1

https://codepen.io/alexxxcs1/...

还是用js来做比较好，css3也不是不行，不过还是有点瑕疵