CSS 动画和过渡

Question

我有 1 个动画和 1 个过渡正在进行，它们一次工作很好，但是当我尝试同时激活两个时，只有 #fade 会运行，另一个完全死了。为什么会这样？我该如何解决？

首先:

#fade{
    width: 100%;
    height: 120%;
    background-color: #000;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 6;

    -webkit-animation: fadeout 6s;
        animation: fadeout 6s;

    opacity: 0;
}​
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

第二个:

nav > div {
    margin-right: 22px;
    -webkit-transform: skew(8deg, 12deg);
    -moz-transform: skew(8deg, 12deg);
    -ms-transform: skew(8deg, 12deg);
    transform: skew(8deg, 12deg);   

    opacity: 0.45;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;       
}

nav > div:hover {
        opacity: 1;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
    }

Answer 1

如果没有 HTML 很难确定，但看起来问题是 #fade 覆盖了你的导航，因为它是绝对定位的并且有一个 z-index 分配给它 - 这可以防止导航被悬停，因此永远不会触发转换。

允许 nav > div 悬停 assign it a stacking context of its own并给它一个比你给 #fade 的值更高的 z-index 值(即 7):

nav > div {
    position: relative;
    z-index: 8;
}