html css GIF 애니메이션

Question

.gif 애니메이션을 한 번 재생했습니다. 그것은 반복하지 않으며 반복하지 않기를 원합니다.

은 내가 마우스가 PNG 이미지는 GIF의 재생을 초과 할 때마다 것을 원하는 2 개 이미지 ("1 개 PNG"과 "1 GIF 애니메이션")

있습니다.

제 문제는 png Image 위에 마우스를 올려 놓으면 gif가 한 번 재생되고 멈추는 것입니다. 마우스를 움직여 이미지 위로 다시 가져 가면 더 이상 재생되지 않습니다.

내 CSS 코드 :

#icon{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent; 
} 
#icon:hover{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent; 
} 

#icon는 DIV

Answer 1

기본적으로 GIF의 반복 또는 애니메이션을 제어 할 수 없습니다. 브라우저는 그대로 GIF를 재생합니다.

기본적으로 GIF가 재생되는 시간이나 재생 시간은 말할 수 없습니다.

세 가지 솔루션이 있습니다.
1. img의 src를 data:image으로 바꿔 GIF를 인라인합니다. src가 변경 될 때마다 GIF가 다시 재생됩니다. 실제 URL 대신 인라인 GIF를 사용하면 GIF를 다시 다운로드 할 필요가 없으므로 시간이 절약됩니다. 예 을 참조하십시오.
2. 댓글 및 다른 답변에서 말한 것처럼 img 태그의 src를 동일한 GIF로 대체 할 수 있지만 (? someRandomNumber = 1345와 같이) URL에 대한 부록을 대체 할 수 있습니다. GIF를 다시 다운로드하고 다시 재생하십시오. 단점은 GIF를 다시 다운로드 할 수 있다는 것입니다.
3. http://slbkbs.org/jsgif/과 같은 것을 사용하여 AJAX를 통해 GIF를 다운로드 한 다음 캔버스 요소를 사용하여 그려서 완전히 제어 할 수 있습니다.

Answer 2

반복을하다는 GIF 자체의 속성입니다. 이렇게하는 가장 좋은 방법은 GIF를 수정하여 애니메이션이 끝없이 반복되도록하는 것입니다. GIF 애니메이션을 허용하는 대부분의 이미지 편집기는 true로 설정할 수있는 "루프"옵션을 가지고 있습니다.

그렇지 않으면 이미지를 다시로드하거나 특정 시간대 이후에 호버를 다시 실행하여 JavaScript로 해킹 할 수 있습니다 (window.setInterval 참조).

Answer 3

당신은이 작업을 위해 CSS에서 이미지를 취할 필요하고, img src=

를 사용하지만이 수정할 수 있습니다 :이 무엇

// hack for not caching .gifs in ff/chrome etc. 
$("img").each(function() { 
    var src = $(this).attr("src"); 
    if(/\.gif$/i.test(src)) { 
     $(this).attr("src", src.replace(/\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1)); 
    } 
}); 

이

입니다
• 페이지의 모든 이미지를 반복합니다.
• .gif가 있는지 확인하십시오.
• 확장 프로그램을 사용하여 en에 임의의 숫자를 추가하십시오.

이 기능을 사용하여 필요없는 비트를 제거하면 png 위로 이동할 때마다 다른 번호가 있기 때문에 .gif 이미지를 다시 요청할 수 있습니다. 그것의 끝에 추가.