스프라이트 이미지에 CSS 전환 효과를 어떻게 만드나요?

내 메뉴 항목 중 일부에 스프라이트 이미지 링크를 사용하고 있으며 배경 위치로 배치하고 있습니다. 호버 안팎에서 페이드 효과를 만들고 싶습니다. 나는이 같은스프라이트 이미지에 CSS 전환 효과를 어떻게 만드나요?

<li class="mobileimg"><a href="#" class="mobileimage" title="Go Mobile"></a></li> 

    li.mobileimg .mobileimage{ 
    display:block; 
    background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat; 
    width: 30px; 
    height:30px; 
    margin-top:9px; 
    margin-left:3px; 
    } 

    li.mobileimg .mobileimage:hover {background-position:0px -29px;}

출처

2013-03-31 Mike Shackelford

뭔가를 설정? http://jsfiddle.net/6q2hH/3/

li.mobileimg .mobileimage{ 
display:block; 
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat; 
width: 30px; 
height:30px; 
margin-top:9px; 
margin-left:3px; 
} 

li.mobileimg .mobileimage:hover { 
    background-position:0px -29px; 
    -webkit-animation-name: fadingItOut; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes fadingItOut { 
    0% { 
     opacity: 1.0; 
    } 
    100% { 
     opacity: 0.0; 
    } 
} 
}

필요에 따라 동작을 조정할 수 있습니다. 자세한 내용은 Mozilla MDN을 확인하십시오.

또한 Safari/Chrome/Chromium/등의 웹킷 예일뿐입니다. 다른 접두사는 (모든 애니메이션 태그는 접두사가 필요합니다.

animation-name // Vanilla (general CSS) 
-moz-animation-name // Firefox 
-o-animation-name // Opera 
-ms-animation-name // Internet Explorer

그리고 프레임들; 먼저

@keyframes fadingItOut { 
@-moz-keyframes fadingItOut { 
@-o-keyframes fadingItOut { 
@-ms-keyframes fadingItOut {

출처

2013-03-31 13:05:10

방금 데모를 확인했는데 IE, FF 또는 Chrome에서 페이딩 또는 전환이 보이지 않습니다. 이전과 동일하고 이미지 위에 마우스를 올리면 배경 위치가 변경됩니다. –

전체 답변을 확인하고 추가 프리픽스 작동 할 것입니다. –

, 당신은 크로스 브라우저 호환성을 위해 1보다 뭔가 .mobileimage:hover의 불투명도를 설정해야합니다, 시도 :

.mobileimage:hover { 
    filter: alpha(opacity=50); 
    -khtml-opacity: .5; 
    -ms-filter: "alpha(opacity=50)"; 
    -moz-opacity: .5; 
    opacity: .5; 
}

을 그리고, 실제 전환 효과를 만들려면 다음을 수행해야 단지 바로 opacity: .5로 전환하는 대신 불투명도에 변화를 만들 수 .mobileimage 알려주기 :

.mobileimage { 
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */ 
    -moz-transition: opacity 500ms ease; /* FF4+ */ 
    -ms-transition: opacity 500ms ease; /* IE10? */ 
    -o-transition: opacity 500ms ease;  /* Opera 10.5+ */ 
    transition: opacity 500ms ease;  
}

,597,은 불투명도가 변경되는 데 걸리는 시간이며 ease은 전환 효과의 유형입니다. updated fiddle을 참조하십시오.

출처

2013-03-31 13:46:27 Fluoxetine

스프라이트 이미지에 CSS 전환 효과를 어떻게 만드나요?

답변

관련 문제