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/ |