CSS动画。从[display none；width:0]到[display inline；width:auto]

我在另一个跨度内有一个隐藏的跨度。当我将鼠标移到外部跨距上时，我希望设置隐藏跨距的动画，以便滑出并显示

<span class="outer">Things: <span class="number">5 <span class="details">[3 widgets, 2 spanners]</span></span></span>

下面是一个没有动画的示例：

我希望隐藏范围从0增长到宽度“自动”或淡入

--编辑--

---

好吧，我对JSFIDLE很差劲，我想我忘了保存它或者其他什么，不管怎样，旧链接没有显示我想要的效果。新更新的链接确实显示了效果。

您需要为不透明度提供一个

背景色才能正常工作

这是你需要的吗？
JSIDLE链接：

编辑：根据您的需求更新JSFIDLE。希望这就是你需要的！
我使用了
div
而不是
span

.outer {
    border: 1px solid grey;
    border-radius: 4px;
    padding: 7px;
    margin: 1em;
    font-family: Verdana;
}

.number {
    background-color: green;
    color: white;
    padding: 3px 7px;
    border-radius: 4px;
}

.details {
    display: none;       
}

.outer:hover .details {
    display: inline;  
}