CODEWITHSUNDEEP
cssanimation
Animus
Animus

Reputation: 833

How to pause css animation?

i want t create an interactive menu for my site: 1) when user "hovers" menuitem it becomes highlighted -> animation stops. 2) after he takes coursor off animation resumes -> item becomes dark. How can i do this with CSS . Because now i got full animation cycle.

Sorry, guys, I'm almost sleeping =)

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

What i want : grey href becomes black when you put mouse over it , and become grey again when you take ,ouse off.

What i have : when I put mouse over i got full animation period . (And it is clear from the code, because i don't know the way of stoping it at some position.)

Upvotes: 0

Views: 98

Answers (1)

James Montagne
James Montagne

Reputation: 78630

If I'm understanding you correctly, you don't want a css animation, you want a transition:

http://jsfiddle.net/S7Nmf/

a.navitem{
    color:#6a6a6a; 

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

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

Upvotes: 2

Related Questions