Dissolvenza transizione CSS solo per elemento

Question

C'è un modo per dissolvere solo in un elemento utilizzando la proprietà di transizione CSS? Non ho mai avuto il bisogno di farlo prima, quindi non ho esaminato il problema, e ora non riesco a trovare un metodo per farlo senza ricorrere a JS. È possibile impostare la transizione per avere uno stato di ritorno immediato?

Answer 1

Questa operazione verrà eseguita in dissolvenza in apertura/chiusura del mouse. È possibile impostare l'opacità originale su 0 e applicarlo alla situazione.

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

violino

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

Answer 2

C'è un paio di modi per fare questo, a seconda di quando si desidera che il fade in si verifichi:

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

Nota: per applicare la dissolvenza al caricamento della pagina è necessario un semplice fotogramma chiave, non una transizione.