CSS3 анимация ключевых кадров

Мне было интересно, можно ли перемотать мои анимации, дело в следующем:

Я анимирую свою навигацию с помощью ключевых кадров css3:

        @-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 */
        }

Теперь он расширяется с анимацией, когда я навожу его, нет, мне интересно, как перемотать анимацию так же плавно, когда я отпускаю наведение.


css keyframe
person FurryKirby    schedule 09.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для этого можно использовать переход CSS.

Пример CSS

nav
{
    width: 0%;
    opacity: 0;
    transition:all 3s ease-in-out;    
}

nav:hover
{
    width: 22%; 
    opacity:0.5;     
}
person Colin Bacon    schedule 09.04.2013
comment
Делает это намного проще, хорошее решение! Спасибо! - person FurryKirby; 09.04.2013