CSS3 animation does not run when loading page

Navigation
3

I have the following code: 

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>

Notice that in executing the script the animation is executed, in case that animation that is executed is the animation of when the cursor exits from on the element (event mouse out ). How do I make sure that this animation does not run when the page loads, or what is the correct way to do the mouse out animation with CSS3?

I tried to add a loading class to the aside element and deny it in the :not(.loading) a:hover CSS selector, however when the class is removed the animation is executed.

.

    
asked by anonymous 20.05.2015 / 16:31

1 answer

4

I solved the problem by using transition instead of 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>
    
20.05.2015 / 16:57
C - How can I read data from a file (Given that I use structures for it) Functions.php or functions.fcn