ul:nth-child(3).active{
        display:block;
        animation: animate ease-in-out 0s 0s backwards;

    }
    ul:nth-child(4).active{
        display:block;
        animation: animate ease-in-out 1s .5s backwards;
    }
    ul:nth-child(5).active{
        display:block;
        animation: animate ease-in-out 2s .5s backwards;
    }
    @keyframes animate{
        0%{
            transform:scaleY(0);
        }
        100%{
            transform:scaleY(1);
        }
    }

上面是修改方法。 无论是keyframes还是transition不要用height width,left,top,bottom,right等会引起reflow的属性来作为变化参数。这段代码里面，使用height来作为变化属性导致了这个错误，因为height在不断的改变，p的高度也在改变，导致浏览器一直在重排后来不及重绘，看到的就只有最后一下子跳出来的样子。这段代码放在移动端估计会让手机更卡顿。
另外keyframe animation transform等如果在移动端记得加webkit前缀。