Soluzione 1 - Aggiungi giù animazione sul primo passaggio del mouse
probabilmente l'opzione migliore è quella di non mettere l'animazione verso il basso fino a quando l'utente ha aleggiato il container per la prima volta.
Ciò comporta l'ascolto dell'evento mouseover, quindi l'aggiunta di una classe con l'animazione in quel punto e la rimozione del listener di eventi. Il principale (potenziale) svantaggio di questo è che si basa su Javascript.
;(function(){
var c = document.getElementById('container');
function addAnim() {
c.classList.add('animated')
// remove the listener, no longer needed
c.removeEventListener('mouseover', addAnim);
};
// listen to mouseover for the container
c.addEventListener('mouseover', addAnim);
})();
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Soluzione 2 - Play Animation nascosto
Un altro modo per aggirare questo è quello inizialmente nascondere l'elemento, assicurarsi che Riproduce l'animazione mentre è nascosta, quindi renderlo visibile . Il rovescio della medaglia è che i tempi potrebbero essere leggermente disattivati e resi visibili troppo presto, e anche il passaggio del mouse non è disponibile immediatamente.
Ciò richiede alcuni Javascript che attendono la lunghezza dell'animazione e rendono quindi visibile solo #content. Questo significa che è anche necessario impostare l'iniziale opacity-0 in modo che non appare sul carico e rimuovere anche il visibility dai fotogrammi chiave - questi non stanno facendo nulla in ogni caso:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById('content').style.visibility = 'visible';
}, 1100);
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
visibility:hidden;
-webkit-animation:animDown 1s ease;
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Soluzione 3 - Utilizzare le transizioni
Nel vostro scenario, si può fare questa CSS solo sostituendo i keyframe s con un transition, invece, in modo da STA rts con opacity:0 e solo il passaggio del mouse ha un cambiamento di opacity e transform:
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
<div id="container">
<div id="content"></div>
</div>
questo potrebbe aiutare: http://css-tricks.com/transitions-only-after-page-load/ – fcalderan
@FabrizioCalderan buona idea ma che ritarda solo l'animazione, si anima ancora in modo errato quando la classe viene rimossa – Rhumborl