CSS轉換在Chrome擴展中不起作用

Question

我試圖在編輯:hover時將單詞「credits」擴展爲在Chrome擴展中顯示積分。它不工作。
這裏是我的學分CSS：

.credits{ 
float: right; 
text-align: right; 
cursor: default; 
} 

.hiddencredits{ 
display: none; 
width: 1px; 
height: 1px; 
-webkit-transition: width 2s, height 2s; 
text-align: center; 
cursor: default; 
} 

.credits:hover .hiddencredits{ 
display: block; 
width: 100px; 
height: 100px; 
background: black; 
color: white; 
} 

當我將鼠標懸停在文本，它打開了學分，但不與過渡。

Answer 1

而不是display財產，使用visibility或opacity財產。

http://jsfiddle.net/chKNw/1/

.credits { 
    float: right; 
    text-align: right; 
    cursor: default; 
} 
.hiddencredits { 
    visibility: hidden; 
    width: 0; 
    height: 0; 
    -webkit-transition:width 2s, height 2s; 
    text-align: center; 
    cursor: default; 
} 
.credits:hover .hiddencredits { 
    visibility: visible; 
    width: 100px; 
    height: 100px; 
    background: black; 
    color: white; 
}