CODEWITHSUNDEEP
cssanimationcss-animations
xoxo_tw
xoxo_tw

Reputation: 269

CSS animation and transition

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

Upvotes: 1

Views: 544

Answers (2)

user1234564
user1234564

Reputation: 71

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

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16723

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?

Upvotes: 0

Related Questions