Анимация загружалась на сайт в виде png-сенквенции в силу определенных пожеланий заказчика. Для воспроизведения анимации применялся следующий код: .pers{ background-image: url('http://site.com/uploads/2017/07/pers_1.png');} .pers:hover { animation: gif steps(6) 0.2s forwards;} .pers img{ visibility: hidden;} @keyframes gif { 0% { background-image: url('site.com/uploads/2017/07/pers_2.png'); } 15% { background-image: url('site.com/uploads/2017/07/pers_3.png'); } 30% { background-image: url('http://site.com/uploads/2017/07/pers_4.png'); } 45% { background-image: url('http://site.com/uploads/2017/07/pers_5.png');} 70% { background-image: url('http://site.com/uploads/2017/07/pers_6.png'); } 100% { background-image: url('http://site.comt/uploads/2017/07/pers_7.png'); } }