実行中の最大高さのキーフレームアニメーション

Question

CSSメニューの設定例がありますが、アニメーションが機能しないようです。

はサブメニューがありPORTFOLIOthis jsfiddle

のみ番目のボタンを見てみましょう。

#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 */ 
} 

がアクティブである： 私はボタンが:hoverセットを持って、あなたがアクティブであるかCSSセレクタを見てみたとき、あなたはこのセレクターことを見ることができるので、私は近くに取得しています知っています。

キーフレームは次のとおりです。

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

ボタンは私がmax-height:500pxにラッパーnav_sub_menu_wrapperを設定推移した場合。問題は、コンテンツnav_sub_menuが、私はこれは同様にIE9で動作するように取得しようとしているので、アニメーションがmax-height: 500px

トランジションへmax-height: 0から500msのフレームされていないオプションを規定するにもかかわらず、即座に表示されているということです。

お時間をいただきありがとうございます。

UPDATEは

問題は、コメント欄での人々のおかげで解決されました。 キーフレームだけを使って外部CSSファイルをロードする前に、独自のjsフレームワークを使用して成功しました。今回は、問題のキーフレームが同じCSSファイル内になければならないように見えるだけです。非常に奇妙な。

とにかく、もう1つの外部CSSファイル内にキーフレームを持つことは、悪い習慣として指摘されています。

Answer 1

@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>