Текущее время: 28 мар 2024, 22:14

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Пожалуйста, прежде чем задавать вопрос, воспользуйтесь поиском, возможно ответ уже существует!



Начать новую тему Ответить на тему  [ 1 сообщение ] 
Автор Сообщение
 Заголовок сообщения: CSS анимация - плавное завершение.
СообщениеДобавлено: 04 фев 2016, 19:40 
Не в сети

Зарегистрирован: 03 сен 2012, 18:47
Сообщения: 50
Нужна помощь профи. Есть 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;
}


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ 1 сообщение ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron