使用 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; }
    }
}