如何使用 CSS 过渡效果答案

【问题标题】：How to use CSS transition effects如何使用 CSS 过渡效果
【发布时间】：2013-12-04 02:02:05
【问题描述】：

我想学习如何使用 css 过渡效果，但我想不通。我想在我的网站http://themeforest.net/item/smiling-responsive-parallax-one-page-template/full_screen_preview/6185323 中添加一个像这样的过渡效果（检查投资组合部分），但每次我尝试添加淡入淡出过渡效果时它都不起作用。我不知道我做错了什么。我已经准备好标记，但我无法让过渡效果发挥作用。有人可以帮我解决这个问题吗？

这是我的标记。

<div class="home-photo-gallery">
<div class="gallery-item-wrap">
    <a href="#"><img src="http://realfood.tesco.com/media/images/juicehero-d2faf7ed-c433-4971-b1fc-b1ff7bf093fe-0-472x310.jpg" /></a>
    <div class="item-text">
        <h4>Orange</h4>
    </div>
</div>

.gallery-item-wrap {
    position: relative;
}

.item-text h4 {
    position: absolute;
    top: 60px;
    width: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
}

.item-text {
    position: absolute;
    width: 472px;
    height: 310px;
    background: rgba(0, 0, 0,0.8);
    top: 0;
    display: none;
}

.gallery-item-wrap:hover .item-text {
    display: block;
    transition: opacity 1s ease-in-out;
}

小提琴http://jsfiddle.net/XNgV8/

在此先感谢我真的很感激！

【问题讨论】：

我不认为这些是 CSS 过渡。我敢打赌，有很多 JS 同时运行以使其工作并看起来那样。

标签： css css-transitions transition

【解决方案1】：

您可以为此使用 CSS 过渡。这是一个更新的小提琴：

http://jsfiddle.net/myajouri/XNgV8/3/

.gallery-item-wrap {
    position: relative;
}

.item-text h4 {
    position: absolute;
    top: 40px;
    width: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
    transition: all 0.5s;    
}

.item-text {
    position: absolute;
    width: 472px;
    height: 310px;
    background: rgba(0, 0, 0,0.8);
    top: 0;
    opacity: 0;
    transition: all 0.3s;
}

.gallery-item-wrap:hover .item-text {
    opacity: 1; 
}

.gallery-item-wrap:hover .item-text h4 {
    top: 60px;
}

【讨论】：

【解决方案2】：

您需要在正确的位置使用opacity和easing。 ;)

检查这个更新的小提琴：http://jsfiddle.net/XNgV8/1/

（我希望这是你想要的效果。）

【讨论】：