CSS3 animation does not run when loading page

Asked

Viewed 385 times

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>

Note that in the execution of script the animation is executed, in which case the animation that is executed is the animation of when the cursor leaves the element (event mouse out). How to make this animation not run when the page is loaded, or what is the correct way to do the animation mouse out with CSS3?

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

css3 animation
  • 1

    As your element undergoes a single change (changes color and returns to normal state) it is best to use transition as it did. But just leaving here information that, you can stop an animation by defining animation-play-state: paused; and can make it work again with animation-play-state: running link. But it is impossible to change these rules each :hover in the element. :)

1 answer

4


I solved the problem using transition in place 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>

Browser other questions tagged css3 animation

You are not signed in. Login or sign up in order to post.