Css, анимация спрайтов

Question

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

Answer 1

Вы можете просто переместить свои правила анимации #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).

Answer 2

Я не могу помочь с проблемой 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);