Q:

CSS transition not working in Chrome Extension

I am trying to make the word "credits", when :hovered on, expand to show the credits in a Chrome Extension.  It isn't working. 

Here is my CSS for the credits:
.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;
}

When I hover over the text, it opens the credits, but not with a transition. 

A:

Instead of display property, use visibility or opacity property. 
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;
}

