Форумы портала PHP.SU :: css анимация, плавный вовзрат к начальному значению

Если для анимации использовать transition + превдокласс :hover, то когда мышку убираешь с элемента, то происходит плавный возврат к начальному значению css свойств элемента(которые были до анимации). Сейчас я использую @keyframes анимацию и свойство animation, но здесь почемуто, если убрать мышку с элемента, происходит резкий возврат к начальным значениям css свойств элемента(которые были до анимации), вместо плавного. Как сделать плавный переход?

Вот код анимации

CODE (htmlphp):
скопировать код в буфер обмена

 
.pBut-aPulse:hover
{
    -webkit-animation:pBut-aPulse 0.5s infinite;
    -o-animation: pBut-aPulse 0.5s infinite;
    -moz-animation: pBut-aPulse 0.5s infinite;
    animation: pBut-aPulse 0.5s infinite;
}
 
@-o-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);   
    }
    100% 
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@-webkit-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);   
    }
    100% 
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@-moz-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);   
    }
    100% 
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);   
    }
    100% 
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
 

(Отредактировано автором: 16 Января, 2014 - 13:21:25)