Question

我正在尝试创建一个动画，其中第三个菜单项的文本在悬停时从左侧滑入。动画似乎有效，因为我可以看到颜色的变化，但幻灯片效果不起作用。

我现在只用chrome测试网站。

<article class="home">


<nav class="topmenu">
    <ul>
        <li><a href="#"><span class="icon">1.</span><span class="menuname">MenuItem1</span></a></li>
        <li><a href="#"><span class="icon">2.</span><span class="menuname">MenuItem2</span></a></li>
        <li><a href="#"><span class="icon">3.</span><span class="menuname">MenuItem3</span></a></li>
        <li><a href="#"><span class="icon">4.</span><span class="menuname">MenuItem4</span></a></li>
    </ul>
</nav>


</article>

这是我正在使用的CSS。

* {
    margin:0;
    padding:0;
}

html{
    height:100%;
    width:100%;
}

body{
    margin:0 auto;
    font-family: Tahoma, Geneva, sans-serif;
    height:100%;
    width:100%;
    overflow:hidden;
    background:#006;
    color: white;
}


.main{
    height:100%;
    width:100%;
    position:relative;
    border: thin solid #FFF;
}



.home .topmenu ul li{
    list-style-type: none;
    float:left;
    margin-right:3px;
    background:#450000;
}

.home .topmenu ul li a{
    position:relative;
    padding:10px 10px 10px 10px;
    display: inline-block;
    text-decoration:none;
    color:#f8d575;
}

.home .topmenu ul li .icon{
    position: relative;
    color:#FFF;
}


.home .topmenu ul li:nth-of-type(3):hover a .menuname{
    -webkit-animation: menuname3 2s linear 0s 1 forwards;
    -moz-animation: menuname3 2s linear 0s 1 forwards;
    -o-animation: menuname3 2s linear 0s 1 forwards;
    animation: menuname3 2s linear 0s 1 forwards;
}



@-webkit-keyframes menuname3{
    from{
        left:-1000px;
    }

    to{
        left:auto;
        color:#dfdeae;
        -webkit-transform: scale(5);
    }
}

有人可以告诉我为什么即使颜色变化有效，幻灯片和变换也无法正常工作。 http://jsfiddle.net/fHWDK/

Answer 1

这是因为left对position:static元素没有任何作用。动画都在这里工作，我敢肯定这不是你想要它看起来像：）

jsFiddle

#topmenu ul li:nth-of-type(3) {
    position:relative;
}
li:nth-of-type(3) .menuname {
    position:absolute;
    left:-1000px;
}

变换和滑动动画在Chrome中不起作用

1 个答案: