使用css平滑过渡

我想像在链接的小提琴中一样管理悬停事件，假设我不知道内容需要多长时间

我的问题是：如何在悬停时添加平滑过渡

.news{
最大宽度：250px；
字体系列：Arial，Helvitica，无衬线；
}
.拇指{
列表样式：无；
位置：相对位置；
填充：0；
保证金：0；
文本对齐：左对齐；
字母间距：-0.25em；
}
李先生{
显示：内联块；
边缘顶部：10px；
位置：相对位置；
溢出：隐藏；
字母间距：正常；
背景色：白色；
边框：1px实心#CCC；
最小高度：264px；
}
.thumbs.news img容器{
高度：180像素；
溢出：隐藏；
z指数：0；
}
.拇指李a img{
显示：块；
位置：相对位置；
宽度：100%；
高度：自动；
}
.thumbs li a div.text{
显示：块；
填充：10px；
文本转换：无；
字体大小：300；
文本对齐：左对齐；
颜色：rgba（0,0,0,0.9）；
背景色：白色；
边框顶部：2个实心#8c1c40；
利润率：-40px 15px 0 15px；
z指数：1；
位置：相对位置；
高度：100px；
溢出：隐藏；
}
.thumbs li a div.text:悬停{
身高：100%；
最小高度：206px；
垂直对齐：底部对齐；
利润上限：-160px；
}
.thumbs li a div.text:悬停：之后{
背景：无；
}
.拇指李a div.文本：之后{
内容：''；
位置：绝对位置；
右：0；
底部：0；
左：0；
高度：2米；
背景：线性梯度（至底部，rgba（255255,0）0，#fff 100%）；
}
.thumbs li a div.text p{
填充：0；
保证金：0；
字体大小：.9em；
}
氢{
颜色：#8c1c40；
字号：1em；
文本转换：大写；
保证金：0.5px 0；
字体大小：粗体；
}
a{
文字装饰：无；
}
}

这是你最新的小提琴，在悬停状态下平稳过渡

我所做的只是在

中添加了一些
转换
。在这种特殊情况下，悬停时更改的所有属性都是
0.3s

显然，解决方案没有考虑所有可能的过渡和场景。这是给你一个想法，你需要做什么

编辑：

这将消除鼠标移出时的过渡效果

在这里了解有关转换的更多信息-
这一个应该完全满足您的需要

将转换添加到元素及其
：hover
状态+修复了它引起的一些其他问题

太好了，非常感谢您这么快的回答。但是，如何在使用鼠标移出时防止过渡？过渡造成了一个延迟，这是非常不正确的。你的意思是，你只想在它扩展时过渡，而不想在它消失时过渡？是的。当外出时，需要过渡延迟才能回到初始位置，所以一切都很混乱。我想当鼠标离开时，如果没有转换，那么它应该会修复它。。。谢谢Praveen，谢谢你花时间在这件事上。这确实接近我想要实现的目标。不幸的是，应用于悬停元素的height属性（100%）会在转换发生时推动bellow元素。这是相当恼人的，因为下面的元素是“跳跃”。我想当文本很长的时候我不能避免它，但是当它足够短以适合的时候我想避免它。。。也许我从一开始就错了。有什么想法吗？添加
最大高度：264px至
。拇指李
。并考虑将这些单元更改为<代码> EM >代码>，以便它们与文本一起缩放。你可以在悬停时调整：
。拇指li:hover{max height:auto；}
非常感谢，看起来很棒。但是，最长的文本（第一个块）被截断。正如我所说，我不知道长度，所以我需要假设它可能很长，然后向下移动下一个街区。。。