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

Question

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

查看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到max-height: 0

的500毫秒帧，内容max-height: 500px也会立即可见

过渡不是一种选择，因为我也试图让它与IE9一起使用。

提前感谢您的时间！

更新

由于评论部分的人员，问题已得到解决。 我之前成功使用了自己的js框架来加载只有关键帧的外部CSS文件。只是看起来这次关键帧必须在同一个CSS文件中才能工作。很奇怪。

无论如何，从现在开始，在另一个外部CSS文件中包含关键帧被认为是不好的做法。

Answer 1

如果包含像@Akshay提到的关键帧，似乎工作正常。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以在没有动画的情况下执行此操作，只需转换最大高度，它将以两种方式设置动画。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;