Текущее время: 25 мар 2017, 01:49

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


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


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



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

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


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

Сейчас этот форум просматривают: Bing [Bot]


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

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