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?Dissolvenza transizione CSS solo per elemento
5
A
risposta
3
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
6
C'è un paio di modi per fare questo, a seconda di quando si desidera che il fade in si verifichi:
/***** 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.
Grazie per la nota sui fotogrammi chiave. Le animazioni devono essere utilizzate sugli elementi di navigazione ed è qualcosa che dovrebbe essere ricorrente. –
@StaffanEstberg cosa intendi essere ricorrente? Ricorrendo a quando ogni link genitore è al passaggio del mouse ogni collegamento figlio si dissolve? – apaul