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

Если для анимации использовать transition + превдокласс :hover, то когда мышку убираешь с элемента, то происходит плавный возврат к начальному значению css свойств элемента(которые были до анимации). Сейчас я использую @keyframes анимацию и свойство animation, но здесь почемуто, если убрать мышку с элемента, происходит резкий возврат к начальным значениям css свойств элемента(которые были до анимации), вместо плавного. Как сделать плавный переход?
Увидел интересную вещь. На одном сайте для анимации элемента использовали одновременно свойства transition и animate и в таком случае все было идеально! Вот этот сайт(смотреть в мозиле, по-моему только для мозилы прописаны все нужные свойства, то есть
все префиксы -moz) http://css3.bradshawenterprises.com/animations/ внизу страницы кнопка "hover to pulsate". Скажите, пожалуйста, это документированно, чтобы одновременно применялась и animate и transition анимация к одному элементу? И кто из этих
двух свойств побеждает? Вообще может где-нибудь про это пишут и можно почитать, а то не нашел...

.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);
    }
}