마우스를 가져갈 때 전환 버튼

Question

나는 전환의 4 단계로이 2048x512 이미지를 가지고 있지만 어떻게 작동시키는 지 알 수 없습니다.

마지막 단계로 변경하는 방법을 알고 있지만 어떻게 그 부분에 transition 효과를 추가 할 수 있습니까? 모든 프레임이 동일한 색상 파레트의 일부 (흰색, 회색, 검은 색)만큼

#instagram { 
    width: 512px; height: 512px; 
    background: url('/host/instagram.png') no-repeat left top; 
} 
#instagram:hover { background-position: -1542px 0px } 

Answer 1

당신은 정말이 특정 예를 들어 전환이 필요하지 않습니다. hover에 자신의 색을 transition 속성과 변화 : 당신은 어떤 글꼴을 기반으로 아이콘 (글꼴 최고 예) : 사용하여 유사 (동일하지,하지만 짧은 타이머 크게 다르지 않다) 효과를 얻을 수 jsfiddle

HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
... 
... 
<div class="icon-circle"> 
    <i class="fa fa-instagram"></i> 
</div> 

CSS :

.icon-circle { 
    position: relative; 
    border-radius: 50%; 
    width: 512px; 
    height: 512px; 
    border: 2rem solid black; 
    transition: all .8s linear; 
} 
.icon-circle:hover { 
    background-color: black; 
    color: white; 
} 
.fa-instagram { 
    font-size: 20rem; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
} 

그러나 SPR을 위해, 어쨌든 이미지를 사용하고자하는 경우 ITE 이미지 당신은 steps() 속성을 CSS animation을 사용하여 수행 jsfiddle

HTML :

<div id="instagram"></div> 

CSS : 나는 완전히 당신의 질문을 이해하지

#instagram { 
    width: 512px; height: 512px; 
    background: url('http://andreimartalog.com/host/instagram.png') no-repeat; 
} 
#instagram:hover { animation: enter 0.3s steps(3) forwards; } 
@keyframes enter { 100% { background-position: -1536px } }