CSS, спрайты, анимация

Question

У меня есть 5 изображений PNG (бегемот делает отжимания!), Которые я хочу анимировать при наведении курсора на сайт.Мне удалось анимировать их, используя позиционирование спрайтов и CSS, но, а) я не знаю, как остановить и запустить анимацию при наведении курсора / мыши и ... б) в справке IE это не работает, пожалуйста http://www.arc -bpictures.com / anim.html Спасибо

Answer 1

Я не могу помочь с проблемой IE css, поэтому я создал легкий плагин jQuery, который, как мне кажется, будет делать эту работу.

jsFiddle

(function($)
{
    var p = {
        imgObj: false,
        timeout:1000,
        images:[0,0,0,0],
        index: -1
    }
    function next()
    {
        if(p.index >= p.images.length -2)
            p.index = 0;
        else
            p.index++;
        /*Update image source*/
        $(p.imgObj).attr("src",p.images[p.index]);
    }

    /*Sprite
      Turn an img element into an animated sprite
      - Call on html img object
      params:
        timeout = duration between changes
        images = Array of image sources
        index = Starting index for images, returns to zero if greater than image count
    */
    $.fn.sprite = function(params)
    {
        p.imgObj = this;
        if(params)
            p = $.extend(true,p, params);
        /*Initiate image iteration*/
        setInterval(next,p.timeout);     
    }

})(jQuery);

/*Example:*/
var params = {
    images:["http://www.english4today.com/i/element_test48.gif",
            "http://www.web2access.org.uk/images/oxygen_test.png",
            "https://www.uk.etsglobal.org/store/images/cache/11_UK_logo_test_ico_tests2.jpg?1212756259"]};

/*Attach plugin*/
$("#test").sprite(params);

Answer 2

Вы можете просто переместить свои правила анимации #sprite на #sprite:hover.

#sprite {
    width:197px;
    height:250px;
    background:url(img/anim1.png) 0 0;
}

#sprite:hover {
    -webkit-animation-duration:1200ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:step-start;
    -webkit-animation-name:animate01;
    -moz-animation-duration:1200ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:step-start;
    -moz-animation-name:animate01;
}

О, и никакие CSS, начинающиеся с -webkit- или -moz-, не будут работать в IE. Для IE <9 вам потребуется использовать javascript для достижения этой цели (не уверен насчет поддержки анимированных CSS в IE9). </p>