Question

我有一个网页，左侧设有隐藏式菜单。我正在使用CSS动画，当div悬停在上面时，菜单滑出更顺畅。但是，当您加载页面时，会播放平滑div滑出视图的动画。有什么方法可以绕过这个吗？提前谢谢！

链接到测试页面，这样您就可以看到它正在做什么：http://testing.justinwidener.x10.mx/

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="scene">
        <aside class="mainmenu">
            <span class="hide-show">»</span>

            <div class="mainmenu_content">
                <img class="mainmenu_img" src="images/logo.png" />

                <hr class="mainmenu_hr" />

                <div class="mainmenu_nav">
                    <a href="index.html">WORK</a> /
                    <a href="contact.html">ABOUT</a>
                </div>

                <hr class="mainmenu_hr_divider" />

                <div class="mainmenu_contact">
                    <img src="images/iconLink.png" /> <a href="contact.html">Contact me!</a><br />
                    Serving the Junction City, KS area.<br />
                    Contact Hours:<br />
                    Mon-Fri --- 10am to 9pm<br />
                    Sat --------- 12pm to 8pm<br />
                    Sun -------- NO CONTACT PLEASE
                </div>

                <hr class="mainmenu_hr_divider" />

                <div class="mainmenu_viewon">
                    <img src="images/comp_icon&32.png" /><img src="images/viewontext.png" /><img src="images/phone_touch_icon&32.png" />
                </div>

                <hr class="mainmenu_hr_divider" />

                <div class="mainmenu_contact_info">
                    <img src="images/globe_2_icon&16.png" /> <a href="www.justinwidener.com">www.justinwidener.com</a><br />
                    <img src="images/phone_2_icon&16.png" /> (785) 375-3066<br />
                    <img src="images/mail_icon&16.png" /> j-w-designs@outlook.com<br />
                </div>

                <div class="mainmenu_footer">
                    ©2015. All rights reserved. V.1.0.
                </div>
            </div>
        </aside>


        <div class="maincontent">

        </div>
    </div>
</body>
</html>

CSS代码

.scene {
    width: 100%;
    height: 100%;
}
/*SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
    background-color: #333;
}

/* MAIN MENU */
.mainmenu {
    height: 100%;
    width: 350px;
    background-color: #FFFFCC;
    position: absolute;
    top: 0;
    left: -325px;
    -webkit-animation: mainmenuout linear .5s;
    animation: mainmenuout linear .5s;
}
.mainmenu:hover {
    left: 0px;
    -webkit-animation: mainmenu linear .5s;
    animation: mainmenu linear .5s;
}
@-webkit-keyframes mainmenuout {
    from {left: 0px;}
    to {left: -325px;}
}
@keyframes mainmenuout {
    from {left: 0px;}
    to {left: -325px;}
}
@-webkit-keyframes mainmenu {
    from {left: -325px;}
    to {left: 0px;}
}
@keyframes mainmenu {
    from {left: -325px;}
    to {left: 0px;}
}
.mainmenu_hr {
    border: thick solid #1a171b;
}
.mainmenu_content {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
}
.mainmenu_contact {
    font-size: 14px;
}
.mainmenu_contact_info {
    font-size: 16px;
    line-height: 16px;
}

.mainmenu_nav {
    font-size: 16px;
}
.mainmenu_hr_divider {
    border: 1px solid #1a171b;
}
.mainmenu_viewon {
    height: 32px;
    text-align: center;
    line-height: 32px;
}
.hide-show {
    float: right;
    position: relative;
    top: 50%;
    padding-right: 7px;
}
.mainmenu_footer {
    font-size: 14px;
    text-align: right;
    margin-top: 25px;
}

在页面加载时停止播放动画

0 个答案: