3

Tenho o seguinte código:

body{margin:0; padding:0; font-family: Verdana, Arial, sans-serif;}
aside{
    width: 200px;
    background-color:#F0F0F0;
}
ul{
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}
li{
    display:block;
    margin:0;
    padding:0;
}
a{
    display:block;
    padding:4px 8px;
    color:#999999;
    font-size:12px;
    text-decoration:none;
}

@-webkit-keyframes asidemenuitembg {
    from {background-color: #F0F0F0; color: #999999;}
    to {background-color: #0C6FA6; color: #F0F0F0;}
}
@keyframes asidemenuitembg {
    from {background-color: #F0F0F0; color: #999999;}
    to {background-color: #0C6FA6; color: #F0F0F0;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes asidemenuitembgr {
    from {background-color: #0C6FA6; color: #F0F0F0;}
    to {background-color: #F0F0F0; color: #999999;}
}
@keyframes asidemenuitembgr {
    from {background-color: #0C6FA6; color: #F0F0F0;}
    to {background-color: #F0F0F0; color: #999999;}
}

aside a{
    -webkit-animation: asidemenuitembgr .4s ease-out;
    -o-animation: asidemenuitembgr .4s ease-out;
    animation: asidemenuitembgr .4s ease-out;
}

aside a:hover{
    color: #F0F0F0;
    background-color: #0C6FA6;
    -webkit-animation: asidemenuitembg .6s ease-in;
    -o-animation: asidemenuitembg .6s ease-in;
    animation: asidemenuitembg .6s ease-in;
}
<aside>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</aside>

Repare que na execução do script a animação é executada, no caso essa animação que é executada é a animação de quando o cursor sai de sobre o elemento (evento mouse out). Como fazer para que essa animação não seja executada quando a página é carregada, ou qual a maneira correta de fazer a animação mouse out com CSS3?

Obs.: Eu tentei adicionar uma classe loading no elemento aside e nega-lo no seletor CSS :not(.loading) a:hover, porém quando a classe é removida a animação é executada.

1
  • 1
    Como seu elemento sofre uma única mudança (muda a cor e volta pro estado normal) o melhor é utilizar transition como fez. Mas só deixando aqui uma informação que, você pode parar uma animação definindo animation-play-state: paused; e pode fazê-la funcionar novamente com animation-play-state: running link. Mas é inviável trocar essas regras a cada :hover no elemento. :) 20/05/2015 às 15:19

1 Resposta 1

4

Resolvi o problema utilizando transition no em vez de animation.

body{margin:0; padding:0; font-family: Verdana, Arial, sans-serif;}
aside{
    width: 200px;
    background-color:#F0F0F0;
}
ul{
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}
li{
    display:block;
    margin:0;
    padding:0;
}
a{
    display:block;
    padding:4px 8px;
    color:#999999;
    font-size:12px;
    text-decoration:none;
}


aside a{
    -webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

aside a:hover{
    color: #F0F0F0;
    background-color: #0C6FA6;
}
<aside>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</aside>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .