Question

我想为我的网站创建一个交互式菜单： 1）当用户＆＃34;徘徊＆＃34; menuitem它会突出显示 - ＆gt;动画停止。 2）他把动画片关闭动画恢复后 - ＆gt;项目变暗。我怎么能用CSS做到这一点。因为现在我得到了完整的动画周期。

对不起，伙计们，我几乎要睡觉了=）

这是CSS：

a.navitem:hover {
    animation: nicehover 2s infinite; 
    -webkit-animation: nicehover 2s  infinite; 
    -moz-animation: nicehover 2s infinite; 
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -moz-animation-iteration-count:1;
}

@keyframes nicehover{
    50%{
        color:#6a6a6a; 
    }
}
@-webkit-keyframes nicehover{
    50%{
        color:#141313; 
    }
}
@-moz-keyframes nicehover{
    50%{
        color:#6a6a6a; 
    }
}

HTML：

        <ul class="navigation">
            <li><a class="navitem" href="index.html">ABOUT-ME</a></li>
            <li><a class="navitem" href="projects.html">PROJECTS</a></li>
            <li><a class="navitem" href="contacts.html">CONTACTS</a></li>
        </ul>

我想要的是：当你把鼠标放在它上面时灰色href会变成黑色，当你拿走它时会变成灰色。

我有什么：当我把鼠标放在上面时，我得到了完整的动画片段。（从代码中可以清楚地看出，因为我不知道在某个位置停止它的方式。）

Answer 1

如果我正确理解你，你不想要一个css动画，你想要一个过渡：

http://jsfiddle.net/S7Nmf/

a.navitem{
    color:#6a6a6a; 

    -webkit-transition: color 1s;
    -moz-transition: color 1s;
    transition: color 1s;
}

a.navitem:hover {
    color: #141313;  
}

如何暂停css动画？

1 个答案: