Question

我有1个动画和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，并为其提供的z-index值高于#fade（即7）的值：

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

Answer 2

你有冲突。您已指定动画将作用于opacity。

你也有这个声明：

 -webkit-transition: all .35s ease-in-out;

请注意，您要将转换应用于支持它的所有可能属性。这包括opacity，您正在应用这些样式的转换：

nav > div {
    opacity: 0.45;
}

nav > div:hover {
    opacity: 1;
}

如果您同时运行转场和动画，您的期望是什么？

CSS动画和过渡

2 个答案: