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

注意：要在頁面加載時淡入，您需要一個簡單的關鍵幀動畫，而不是過渡。