CSS animation and transition

Question

I have 1 animation and and 1 transition going on, They work great 1 at a time, but when I try to have both activated at the same time only the #fade will run, the other is totally dead. Why is this happening ? How can I solve it ?

first:

#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; }
}

second:

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);
    }

A jsFiddle reproducing the problem would be a good idea

Itay
– Itay

2014-02-19 15:29:38 +00:00
Commented Feb 19, 2014 at 15:29 — Itay
– Itay, Commented Feb 19, 2014 at 15:29
Not to mention some markup.

Palpatim
– Palpatim

2014-02-19 15:47:57 +00:00
Commented Feb 19, 2014 at 15:47 — Palpatim
– Palpatim, Commented Feb 19, 2014 at 15:47

user1234564 · Accepted Answer · 2014-02-19 16:02:33Z

1

It's hard to be certain without the HTML, but it looks as if the problem is that #fade is overlaying your nav because it's absolutely positioned and has a z-index assigned to it - this prevents the nav from being hovered and hence the transition is never triggered.

To allow nav > div to be hoverable assign it a stacking context of its own and give it a z-index value higher than what you gave to #fade (which is 7):

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

answered Feb 19, 2014 at 16:02

user1234564

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Epic · Accepted Answer · 2014-02-19 15:51:17Z

You have a conflict. You have specified the animation will act upon opacity.

You also have this declaration:

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

Note that you are applying a transition to all possible properties that support it. That includes opacity, which you are applying a transition to with these styles:

nav > div {
    opacity: 0.45;
}

nav > div:hover {
    opacity: 1;
}

If you run your transition and your animation at the same time, what is your expectation?

Collectives™ on Stack Overflow

CSS animation and transition

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related