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.
transition
como fez. Mas só deixando aqui uma informação que, você pode parar uma animação definindoanimation-play-state: paused;
e pode fazê-la funcionar novamente comanimation-play-state: running
link. Mas é inviável trocar essas regras a cada:hover
no elemento. :)