过渡延迟菜单，如Apple网站

Question

以下是我的fiddle，我希望在移动视口中获得与Apple网站类似的确切转换和效果。

到目前为止，我创造了类似苹果的东西，但我的过渡和效果与苹果并不相同，我认为苹果中的菜单链接比我的更漂亮。

   .in .atitel-menu-links li {
        opacity: 1;
        transform: translateY(0px);



        transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;

    }

    .in .atitel-menu-links li:nth-child(1){
        transition-delay: 600ms;


    }
    .in .atitel-menu-links li:nth-child(2) {
        transition-delay: 800ms;

    }
   .in .atitel-menu-links li:nth-child(3) {
        transition-delay: 1s;

    }

    .in .atitel-menu-links li:nth-child(4){
        transition-delay: 1.3s;

    }
    .in .atitel-menu-links li:nth-child(5){
        transition-delay: 1.6s;

    }

已更新：

任何帮助都会很棒？

由于

Answer 1

让你的css代码像这样`

.atitel-menu-links li {
    opacity: 0;
    transform: translateY(-10px) scale(1.7);
}
.in .atitel-menu-links li {
    opacity: 1;
    transform: translateY(0px) scale(1);
    transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.in .atitel-menu-links li:nth-child(1) {
    transition-delay: 70ms;
}
.in .atitel-menu-links li:nth-child(2) {
    transition-delay: 140ms;
}
.in .atitel-menu-links li:nth-child(3) {
    transition-delay: 210ms;
}
.in .atitel-menu-links li:nth-child(4) {
    transition-delay: 280ms;
}
.in .atitel-menu-links li:nth-child(5) {
    transition-delay: 350ms;
}

JS小提琴在这里http://jsfiddle.net/hLza6qa6/

虽然它与苹果公司的菜单不完全相同，但比它更接近它