css - CSS过渡淡入仅适用于元素

Question

有没有办法只使用 CSS 过渡属性淡入元素？以前从来没有真正需要这个，所以没有研究它，现在我似乎找不到不求助于 JS 的方法。是否可以将转换设置为立即返回状态？

Answer 1

有几种方法可以做到这一点，具体取决于您希望何时进行淡入：

jsFiddle

/***** Fade in on a page load *****/
.fadeInLoad {
    border: 1px solid #48484A;
    font-size: 40px;
    animation: fadeInLoad 5s;
}
@keyframes fadeInLoad {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/***** Fade in child when parent hovered *****/
.fadeIn {
    border: 1px solid #48484A;
    font-size: 18px;
    opacity:0;  
    -webkit-transition : all 2s ease-out;
    -moz-transition : all 2s ease-out;
    -o-transition : all 2s ease-out;
    transition : all 2s ease-out;
}
.thisText:hover .fadeIn {
    opacity: 1; 
}

注意：要在页面加载时淡入，您需要一个简单的关键帧动画，而不是过渡。

Answer 2

这将在鼠标移入/鼠标移出时淡入/淡出。您可以将原始不透明度设置为 0 并将其应用于您的情况。

.item {   
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
}

.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
} 

小提琴

http://jsfiddle.net/7uR8z/6/