Переходы фона CSS3

Question

Так что я хочу воссоздать именно этот переход ленты http://subtlepatterns.com/, но я делаю что-то неправильно. Мое ленточное изображение 140x160 [ширина, высота], но путем зависания ничего не происходит.

я поставил:

#toplogo { 
    position: absolute; 
    left: 400px; 
    background-position: 0px -10px; 
    z-index: 5000; 
} 


#toplogo a { 
    background: url('ribbon.png') no-repeat; 
    width: 140px; 
    height: 160px; 
    display: block; 
    background-position: 0px -10px; 
    text-indent: -9999px; 
    -webkit-transition: 0.10s ease-in; 
    -moz-transition: 0.10s ease-in; 
} 



<div id="toplogo"> <a href="/">hello</a> </div> 

Answer 1

Добавьте это в CSS -

#toplogo a:hover{ 
    background-position: 0px 0px; 
} 

Answer 2

попробовать

#toplogo a { 
    background: url('ribbon.png') no-repeat; 
    width: 140px; 
    height: 160px; 
    display: block; 
    background-position: 0px -10px; 
    text-indent: -9999px; 
    -webkit-transition: background-position .1s ease-in; 
    -moz-transition: background-position .1s ease-in; 
} 

#toplogo a:hover { 
    background-position: 0 0; 
}