CSS转换-仅在一个方向上工作，需要同时在两个方向上工作

我有一个CSS转换，它发生在一个链接的悬停处-转换发生在这个链接的一些内容上

我的问题是，将鼠标悬停在链接上时，过渡（主要是设置宽度和高度属性的动画）可以正常工作，但在停止悬停时，元素只会弹回到其未覆盖的状态，而不是过渡

定义的样式如下所示：

a.transition {
    display: block;
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid #000;
    color: #000'
}
a.transition .category_info_container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    transition: height 0.5s, width 0.5s, color 0.5s;
}
a.transition .category_info_container .category_info {
    background-color: #aaa;
    padding: 0 20px;
}
a.transition .category_info_container .category_info .category_name {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 70px;
}
a.transition .category_info_container .category_info .category_desc {
    display: none;
}
a.transition:hover .category_info_container  {
    background: #eee;
    width: 48%;
    height: 100%;
}
a.transition:hover .category_info_container .category_info  {
    position: absolute;
    bottom: 20%;
    background: none;
}
a.transition:hover .category_info_container .category_info .category_name {
    color: #000;
    line-height: 50px;
}
    a.transition:hover .category_info_container .category_info .category_desc {
    display: block;
}

和我的标记：

<a href="#" class="transition">
<div class="category_info_container">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</div>
</a>

---

我已经创建了一个。

我认为，如果您对元素使用不同的块，效果会更好：

签出我的示例：

@Zach Saucier-你能提供一个答案，详细说明你在评论中的链接中做了什么吗？我所做的只是改变

过渡：高度0.5s，宽度0.5s，颜色0.5s到<代码>转换：0.5s

@Zach Saucier-并将

不透明度：0

设置为

。我想？是的，如果你想用一个fadeI转换这个，我确实考虑过，但不想重复标记。还有别的解决办法吗？
<a href="#" class="transition">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
    </div>

    <div class="category_info-add">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</a>