CSS转换仅在元素中淡入

Question

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

Answer 1

这将在鼠标输入/鼠标移出时淡入/淡出。您可以将原始不透明度设置为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/

Answer 2

有，这取决于当你想你的渐隐在发生一对夫妇的方式做到这一点：

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; 
} 

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