Transizione CSS3 - Effetto dissolvenza

Sto cercando di implementare l'effetto "dissolvenza" in puro css. Ecco lo fiddle Ho esaminato un paio di soluzioni online. Tuttavia dopo aver letto il documentation online Transizione CSS3 - Effetto dissolvenza

Sto cercando di capire perché l'animazione di diapositiva non funzionerebbe. Qualche indicazione?

Ecco il codice HTML

<div class="dummy-wrap"> 
    <div class="success-wrap successfully-saved">Saved</div> 
</div>

Il CSS

.dummy-wrap { 
    animation: slideup 2s; 
    -moz-animation: slideup 2s; 
    -webkit-animation: slideup 2s; 
    -o-animation: slideup 2s; 
} 
.success-wrap { 
    width: 75px; 
    min-height: 20px; 
    clear: both; 
    margin-top: 10px; 
} 
.successfully-saved { 
    color: #FFFFFF; 
    font-size: 20px; 
    padding: 15px 40px; 
    margin-bottom: 20px; 
    text-align: center; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background-color: #00b953; 
} 
@keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-moz-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-webkit-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-o-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
}

fonte

2013-04-09 Anonymous

È possibile utilizzare le transizioni invece:

.successfully-saved.hide-opacity{ 
    opacity: 0; 
} 

.successfully-saved { 
    color: #FFFFFF; 
    text-align: center; 

    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -ms-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    opacity: 1; 
}

fonte

2013-05-17 14:38:13 karthikr

Hai dimenticato di aggiungere una proprietà position alla classe .dummy-wrap, e la parte superiore/sinistra/in basso/giusti valori non si applicano per elementi posizionati staticamente (default)

http://jsfiddle.net/dYBD2/2/

fonte

2013-04-09 16:13:46 Adrift

Grazie, ma come faccio a nascondere dopo la transizione del tutto? –

Ci sono diversi modi: puoi semplicemente aumentare il valore "top'" in modo che si sposti "fuori" dal viewport oppure puoi usare l'opacità per l'animazione in modo che svanisca come ti sembra .. – Adrift

Ecco un esempio: http://jsfiddle.net/dYBD2/3/ utilizzando il precedente metodo – Adrift

Ecco l'altro modo di fare lo stesso.

fadeIn effetto

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 2s linear; 
}

effetto fadeOut

.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
}

Si può vedere articolo dettagliato here.

UPDATE: ho trovato più up-to-date esercitazione CSS3 Transition: fadeIn and fadeOut like effects to hide show elements un d Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition qui con codice di esempio.

So che sono in ritardo per rispondere ma postare questa risposta per risparmiare tempo agli altri. Spero che ti aiuti !!

fonte

2014-01-03 18:07:03

Bella risposta, sto cercando di aggiungere 'display: none' per cancellare la casella quando termina l'animazione" nascondi ", qualche idea? – Apolo

Non sono sicuro di cosa hai bisogno qui, ma puoi provare 'display: block' invece di' visibility: visible' nella classe '.visible' allo stesso modo' display: none' invece di 'visibility: hidden' in'.classe hidden' dell'esempio precedente. –

@MMTac Questo non funziona poiché 'display' non è una delle [proprietà CSS animabili] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). Vedi [Animazione da "display: block" a "display: none"] (http://www.impressivewebs.com/animate-display-block-none/). – peterflynn

Solo FYI, c'è una libreria versatile denominata animate.css che la gente potrebbe essere interessata, ha un bel po 'di pura animazione CSS3. Puoi prenderlo e usarlo o apprendere la tecnica sottostante.

fonte

2014-03-19 01:59:48 jasonslyvia

.fadeOut{ 
    background-color: rgba(255, 0, 0, 0.83); 
    border-radius: 8px; 
    box-shadow: silver 3px 3px 5px 0px; 
    border: 2px dashed yellow; 
    padding: 3px; 
} 
.fadeOut.end{ 
    transition: all 1s ease-in-out; 
    background-color: rgba(255, 0, 0, 0.0); 
    box-shadow: none; 
    border: 0px dashed yellow; 
    border-radius: 0px; 
}

demo here.

fonte

2014-07-01 13:55:29

Questo è il codice di lavoro per la tua domanda.
Godetevi Coding ....

<html> 
    <head> 

     <style> 

     .animated { 
      background-color: green; 
      background-position: left top; 
      padding-top:95px; 
      margin-bottom:60px; 
      -webkit-animation-duration: 10s;animation-duration: 10s; 
      -webkit-animation-fill-mode: both;animation-fill-mode: both; 
     } 

     @-webkit-keyframes fadeOut { 
      0% {opacity: 1;} 
      100% {opacity: 0;} 
     } 

     @keyframes fadeOut { 
      0% {opacity: 1;} 
      100% {opacity: 0;} 
     } 

     .fadeOut { 
      -webkit-animation-name: fadeOut; 
      animation-name: fadeOut; 
     } 
     </style> 

    </head> 
    <body> 

     <div id="animated-example" class="animated fadeOut"></div> 

    </body> 
</html>

fonte

2017-09-28 05:54:56

Si prega di allegare una spiegazione della soluzione: come funziona? perché è diverso dalle altre soluzioni già pubblicate? – lifeisfoo

@lifeisfoo Ho provato con soprattutto le soluzioni, ma questo è il modo più semplice e più semplice per farlo e una cosa più importante è che il testo scomparirà automaticamente dopo alcuni secondi (10). Quindi non c'è bisogno di alcun clic. –

Transizione CSS3 - Effetto dissolvenza

risposta

Problemi correlati