forum.okis.ru
http://forum.okis.ru/

CSS анимация - плавное завершение.
http://forum.okis.ru/viewtopic.php?f=10&t=5316
Страница 1 из 1

Автор:  Rodion7195 [ 04 фев 2016, 19:40 ]
Заголовок сообщения:  CSS анимация - плавное завершение.

Нужна помощь профи. Есть 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 из 1 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/