Показать сообщение отдельно
  #1 (permalink)  
Старый 16.01.2014, 16:54
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

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

Вот код анимации
.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);
    }
}


И может кто-нибудь знает библиотеку какую-нибудь, которая делает следующее: использует css3 анимацию, если браузер поддерживает css3 анимацию, либо использует jQuery анимацию, если не поддерживается css3 анимация.
Ответить с цитированием