CSS-анимация и переход

Question

У меня есть 1 анимация и 1 переход, они работают отлично по одному за раз, но когда я пытаюсь активировать одновременно, будет # ######################### , Почему это происходит ? Как я могу это решить?

первый:

#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 быть hoverable assign it a stacking context of its own и дать ему значение Z-индекс выше, чем то, что вы дали #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; 
} 

Если вы ведете свой переход и анимацию в то же самое время, что ваши ожидания?