You could use CSS transition to do this.
Example CSS
nav
{
width: 0%;
opacity: 0;
transition:all 3s ease-in-out;
}
nav:hover
{
width: 22%;
opacity:0.5;
}
Вопрос
I was wondering if it's possible to rewind my animations, the case is as follows:
I'm animating my nav with css3 keyframes:
@-webkit-keyframes nav /* Safari and Chrome */
{
0% {width: 0%; opacity:0.0;}
100% {width: 22%; opacity:0.5;}
}
nav:hover
{
animation: nav 3s;
-moz-animation: nav 3s; /* Firefox */
-webkit-animation: nav 3s; /* Safari and Chrome */
-o-animation: nav 3s; /* Opera */
}
Now he expands with a animation when i hover it, no i'm wondering how to rewind the animation even as smooth when i release the hover.
Решение
You could use CSS transition to do this.
Example CSS
nav
{
width: 0%;
opacity: 0;
transition:all 3s ease-in-out;
}
nav:hover
{
width: 22%;
opacity:0.5;
}