淡出，然后使用CSS3过渡淡入元素

Question

我的问题

是否可以暂时隐藏元素，然后在使用CSS3的X毫秒后再次显示它？

简要说明......

我目前正在构建一个响应式网站，侧边栏会根据屏幕大小改变大小，边栏上的导航图标也是如此。

在侧边栏调整宽度之前，我想淡出导航图标，然后在侧边栏完成动画制作后淡出它们。

见这个例子：

我有以下步骤：

1. 屏幕调整大小
2. 导航图标淡出
3. 导航图标不可见后，侧边栏会调整大小
4. 一旦侧边栏调整大小，导航图标就会淡入，但这次应用了不同的样式，因此它们更小...... （不知道如何做这个部分...）

我为侧边栏的大小设置动画的方式如下：

@media all and (max-width: 1060px) {

    /* Define the Sidebar */
    #sidebar {width:60px !important;}

    /* Define the Sidebar Animation */
    /* The delay ensures it does not resize until the icons have disappeared */
    #sidebar {transition: width 300ms ease 300ms;}

}

Answer 1

根据@ Mr.Alien的想法，我能够实现您想要的侧边栏和导航的最终动画。您可以查看JS FIDDLE DEMO以查看其实际效果。显然，我没有太多的价值观，所以总有一些需要改进的地方。但我想，你会得到这个想法，@ Ben。请检查chrome或Safari，因为我没有放置任何其他供应商前缀而不是-webkit。您可以调整小提琴窗口的大小以进行检查。 ：）

#sidebar {
    width: 250px;
    -webkit-transition: width 1s ease;
}

#nav img {
    width: 100px;
}

@media all and (max-width: 700px) {
    #sidebar {
        width:100px;
    } 
    #nav img {
         width: 50px;
        -webkit-animation-name: comeBackSmaller;
        -webkit-animation-duration: 0.8s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }  
    @-webkit-keyframes comeBackSmaller {  
        0% { opacity: 1.0; width: 100px; }
        25% { opacity: 0.0; width: 75px; }
        50% { opacity: 0.0; width: 25px; }
        100% { opacity: 1.0; width: 50px; }
    }
}