淡出，然后使用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以查看它的运行情况。很明显，我没有太多的价值观，所以总有改进的地方。“但我想，你会明白的，”本。请检查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; }
    }
}