最大高度运行的关键帧动画但不起作用

Question

我有一个示例 CSS 菜单设置，但我似乎无法让动画正常工作。

只有第二个按钮 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 立即可见，即使动画规定了从 max-height: 0 到 max-height: 500px

的 500 毫秒帧

转换不是一个选项，因为我正在尝试让它也能与 IE9 一起使用。

提前感谢您的宝贵时间！

更新

感谢评论区的各位，问题已经解决。之前我已经成功地使用了自己的 js 框架来加载仅包含关键帧的外部 CSS 文件。只是这次有问题的关键帧似乎必须在同一个 CSS 文件中才能正常工作。很奇怪。

无论如何，从现在开始，将关键帧放在另一个外部 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">
  <nav>
   <ul>
    <li>
     <a href="javascript:void(0)" class="nav_button">Home</a>
    </li>
    <li>
     <a href="javascript:void(0)" class="nav_button">Portfolio</a>

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

  </nav>
 </section>

您也可以在没有动画的情况下执行此操作，只需转换 max-height 即可双向动画。

#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">
  <nav>
   <ul>
    <li>
     <a href="javascript:void(0)" class="nav_button">Home</a>
    </li>
    <li>
     <a href="javascript:void(0)" class="nav_button">Portfolio</a>

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

  </nav>
 </section>

最大高度运行的关键帧动画但不起作用

Keyframe animation for max-height running but not working

html

css

keyframe

css-animations

最大高度 运行 的关键帧动画但不起作用

Keyframe animation for max-height running but not working

html

css

keyframe

css-animations

最大高度运行的关键帧动画但不起作用