如何創建刻度的動畫逐幀外觀

Question

我有一張照片。如何創建動畫的逐幀顯示的動畫？

我怎麼能這樣做？

Answer 1

您可以使用CSS動畫以不同的步驟移動背景圖像，或將其替換。

但是，我不會逐幀地做這個例子。將勾放在單獨的圖像中並通過動畫寬度來「揭開」會更好。無論是CSS動畫還是過渡，都取決於情況。

這裏是一個使用你的圖像的例子，沒有單獨的圖像的勾號。不幸的是，你的圖像沒有空的狀態。

.foo1, .foo2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: .5s all ease; 
 
    background-image: url('http://i.stack.imgur.com/gzzRl.png'); 
 
    position: absolute; 
 
} 
 

 
.container { 
 
    position: relative; 
 
} 
 

 
.foo2 { 
 
    background-position: -202px 0; 
 
    width: 0; 
 
} 
 

 
.container:hover .foo2 { 
 
    width: 100px; 
 
}

<div class="container"> 
 
    <div class="foo1"> 
 
    </div> 
 
    <div class="foo2"> 
 
    </div> 
 
</div>