Если для анимации использовать 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 анимация.