魅族官网导航栏一个一个显示的动画是怎么做的？

Question

鼠标移到导航栏上面，下面的手机是一个一个显示的，这个动画咋做？是每隔一段时间用js给元素加class吗？

Answer 1

目测 css3的动画指针 淡入淡出加位移效果

Answer 2

@-webkit-keyframes meizu-header-sub-show {
    from {
        height: 0
    }

    to {
        height: 127px
    }
}
@-webkit-keyframes meizu-header-sub-enter {
    from {
        -webkit-transform: translate(70px);
        transform: translate(70px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

主要是这两个动画