Нужна помощь профи. Есть css код с анимацией. Код работает при наведении, но если убрать мышку с блока до завершения анимации, она резко оборвется. Как сделать анимацию непрерывной? Чтобы если она началась, то отработала до конца. Заранее благодарю за ответы
Код:
@-webkit-keyframes swing
{
15%
{
transform: translateX(5px);
webkit-transform: translateX(5px);
}
30%
{
transform: translateX(-5px);
webkit-transform: translateX(-5px);
}
50%
{
transform: translateX(3px);
webkit-transform: translateX(3px);
}
65%
{
transform: translateX(-3px);
webkit-transform: translateX(-3px);
}
80%
{
transform: translateX(2px);
webkit-transform: translateX(2px);
}
100%
{
transform: translateX(0);
webkit-transform: translateX(0);
}
}
@keyframes swing
{
15%
{
transform: translateX(5px);
webkit-transform: translateX(5px);
}
30%
{
transform: translateX(-5px);
webkit-transform: translateX(-5px);
}
50%
{
transform: translateX(3px);
webkit-transform: translateX(3px);
}
65%
{
transform: translateX(-3px);
webkit-transform: translateX(-3px);
}
80%
{
transform: translateX(2px);
webkit-transform: translateX(2px);
}
100%
{
transform: translateX(0);
webkit-transform: translateX(0);
}
}
.swing:hover
{
animation: swing 1s ease;
animation-iteration-count: 1;
transition: all 0.3s ease;
webkit-animation: swing 1s ease;
webkit-animation-iteration-count: 1;
}
Вход
Регистрация
FAQ
Поиск
