Анимация ключевого кадра для max-height работает, но не работает

У меня есть пример меню CSS, но я не могу заставить анимацию работать.Анимация ключевого кадра для max-height работает, но не работает

Взгляните на this jsfiddle

Только второй кнопки PORTFOLIO имеет подменю. Я знаю, что я получаю близко, потому что, когда кнопка имеет :hover набор, и вы посмотрите на то, что CSS селекторы активны, вы можете увидеть, что это селектор:

#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu { 
    /* iE doesn't play nice with shorthand play-state, but it's initially running so it's redundant */ 
    -webkit-animation-play-state: running; 
    -moz-animation-play-state: running; 
    -o-animation-play-state: running; 
    animation-play-state: running; 

    -webkit-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Chrome 4.3 | Edge | Safari 4.0 - 8.0 */ 
    -moz-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Firefox 5.0 | Gecko 16.0 */ 
    -o-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Opera 12 */ 
    animation: slideDown 500ms linear 0s 1 normal forwards; /* Modern browsers */ 
}

активен.

Ключевой кадр:

@keyframes slideDown{ 
    from { 
     max-height: 0; 
    } 
    to { 
     max-height: 500px; 
    } 
}

Когда кнопка парил я установил обертку nav_sub_menu_wrapper в max-height:500px. Проблема заключается в том, что содержание nav_sub_menu моментально видно, даже если анимация диктует 500мс кадр из max-height: 0 в max-height: 500px

Transitions не вариант, потому что я пытаюсь получить эту работу с IE9, а также.

Заранее благодарим за ваше время!

UPDATE

Проблема была решена благодаря людям в разделе комментариев. Я успешно использовал свою собственную инфраструктуру js перед загрузкой внешнего файла CSS только с ключевыми кадрами. Кажется, что на этот раз ключевой кадр должен находиться внутри одного и того же файла CSS, чтобы он работал. Очень странно.

В любом случае, с момента создания ключевых кадров внутри другого внешнего файла CSS отмечается как плохая практика.

источник

2017-01-31 DerpyNerd

Вы не включайте '@ keyframes' в вашей скрипке? – Akshay

Кажется, что это нормально, если вы включаете ключевые фреймы, такие как @Akshay, упомянутые https://jsfiddle.net/ugue8hma/4/ –

@Akshay Упс мой плохой. Просто добавил его к скрипке. Я работал в версии 2 – DerpyNerd

Кажется, что это нормально, если вы включили ключевые кадры, такие как @Akshay.

#navigation { 
 
    position:relative; 
 
    width: 100%; 
 
    padding: 15px; 
 
} 
 
#navigation ul { 
 
    list-style-type: none; 
 
} 
 
#navigation ul > li { 
 
    position: relative; 
 
    float:left; 
 
} 
 
#navigation ul > li > * { 
 
    float: left; 
 
} 
 
#navigation ul.nav_sub_menu { 
 
    overflow:hidden; 
 
} 
 
#navigation ul.nav_sub_menu > li { 
 
    width: 100%; 
 
} 
 
#navigation div.nav_sub_menu_wrapper { 
 
    position: absolute; 
 
    overflow:hidden; 
 
    top: 42px; 
 
    max-height: 0; 
 
} 
 
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper { 
 
    z-index: 99; 
 
    max-height: 500px; 
 
} 
 
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu { 
 
    /* iE doesn't play nice with shorthand play-state, but it's initially running so it's redundant */ 
 
    -webkit-animation-play-state: running; 
 
    -moz-animation-play-state: running; 
 
    -o-animation-play-state: running; 
 
    animation-play-state: running; 
 

 
    -webkit-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Chrome 4.3 | Edge | Safari 4.0 - 8.0 */ 
 
    -moz-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Firefox 5.0 | Gecko 16.0 */ 
 
    -o-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Opera 12 */ 
 
    animation: slideDown 500ms linear 0s 1 normal forwards; /* Modern browsers */ 
 
} 
 
@keyframes slideDown{ 
 
    from { 
 
     max-height: 0; 
 
    } 
 
    to { 
 
     max-height: 500px; 
 
    } 
 
} 
 
#navigation a.nav_button { 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */ 
 
    background: #4E7C87; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7c87', endColorstr='#304480',GradientType=0); /* IE6-9 */ 
 

 
    color: white; 
 
    float: left; 
 
    padding: 10px 25px 10px 15px; 
 
    border: 1px solid black; 
 
    font-size:1.2em; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 
#navigation a.nav_button:hover { 
 
    background: #4E7C87; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0); /* IE6-9 */ 
 
}

<section id="navigation"> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Home</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Portfolio</a> 
 

 
\t \t \t \t \t <div class="nav_sub_menu_wrapper"> 
 
\t \t \t \t \t \t <ul class="nav_sub_menu"> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">About me</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Goals</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">About</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Contact</a> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 

 
\t \t </nav> 
 
\t </section>

Вы также можете сделать это без анимации, а просто переход макс-высоту, и он будет анимировать в обоих направлениях.

#navigation { 
 
    position:relative; 
 
    width: 100%; 
 
    padding: 15px; 
 
} 
 
#navigation ul { 
 
    list-style-type: none; 
 
} 
 
#navigation ul > li { 
 
    position: relative; 
 
    float:left; 
 
} 
 
#navigation ul > li > * { 
 
    float: left; 
 
} 
 
#navigation ul.nav_sub_menu { 
 
    overflow:hidden; 
 
    
 
} 
 
#navigation ul.nav_sub_menu > li { 
 
    width: 100%; 
 
} 
 
#navigation div.nav_sub_menu_wrapper { 
 
    position: absolute; 
 
    overflow:hidden; 
 
    top: 42px; 
 
    max-height: 0; 
 
    transition: max-height .5s; 
 
} 
 
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper { 
 
    z-index: 99; 
 
    max-height: 500px; 
 
} 
 
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu { 
 
    max-height: 500px; 
 
} 
 

 
#navigation a.nav_button { 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */ 
 
    background: #4E7C87; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7c87', endColorstr='#304480',GradientType=0); /* IE6-9 */ 
 

 
    color: white; 
 
    float: left; 
 
    padding: 10px 25px 10px 15px; 
 
    border: 1px solid black; 
 
    font-size:1.2em; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 
#navigation a.nav_button:hover { 
 
    background: #4E7C87; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%, 
 
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0); /* IE6-9 */ 
 
}

<section id="navigation"> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Home</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Portfolio</a> 
 

 
\t \t \t \t \t <div class="nav_sub_menu_wrapper"> 
 
\t \t \t \t \t \t <ul class="nav_sub_menu"> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">About me</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Goals</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li> 
 
\t \t \t \t \t \t \t <li><a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">About</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href="javascript:void(0)" class="nav_button">Contact</a> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 

 
\t \t </nav> 
 
\t </section>

источник

2017-01-31 17:11:13

Да ... действительно. Проблема в том, что моя инфраструктура javascript загружает файл CSS специально для ключевых кадров. Кажется, я помещаю ключевой кадр в свой основной файл CSS, он действительно работает. Может ли задержка быть причиной? Я просто оставлю его в том же файле CSS. – DerpyNerd

Анимация ключевого кадра для max-height работает, но не работает

ответ

Смежные вопросы