Question

有没有办法只使用CSS过渡属性淡入元素？从来没有真正需要这个，所以没有调查它，现在我似乎无法找到一个方法这样做而不诉诸JS。是否可以将转换设置为立即返回状态？

Answer 1

有几种方法可以执行此操作，具体取决于您希望淡入的时间：

/***** 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/

CSS转换仅适用于元素

2 个答案: