Domanda Come posso cambiare altezza: 0; ad altezza: auto; usando i CSS?


Sto cercando di fare un <ul> Scorri verso il basso usando le transizioni CSS.

Il <ul> inizia a height: 0;. Al passaggio del mouse, l'altezza è impostata su height:auto;. Tuttavia, questo sta causando semplicemente apparire, non transizione,

Se lo faccio da height: 40px; a height: auto;, quindi scivolerà fino a height: 0;e poi balzare all'improvviso all'altezza corretta.

In quale altro modo potrei farlo senza usare JavaScript?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>


1594
2017-08-18 02:50


origine


risposte:


Uso max-height nella trasformazione e non height. E impostare un valore max-height a qualcosa di più grande di quanto la tua scatola non otterrà mai.

Vedere Demo JSFiddle fornito da Chris Jordan in un altro risposta Qui.

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


2157
2017-11-30 18:42



Dovresti invece usare scaleY.

HTML:

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS:

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

Ho creato una versione con prefisso del fornitore del codice sopra su jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ e hai cambiato il tuo jsfiddle per usare scaleY invece di altezza, http://jsfiddle.net/dotnetCarpenter/7cnfc/206/.


228
2018-06-23 10:57



Al momento non è possibile animare in altezza quando una delle altezze coinvolte è auto, devi impostare due altezze esplicite.


164
2017-08-18 12:46



La soluzione che ho sempre usato è stata la prima dissolvenza, quindi la riduzione font-size, padding e margin valori. Non ha lo stesso aspetto di un wipe, ma funziona senza statica height o max-height.

/* final display */
.menu .list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
.menu:not(:hover) .list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
.menu:hover .list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}

Esempio di lavoro:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}
<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Spacing.


81
2018-05-29 14:05



Puoi, con un po 'di follia non semantica. Il mio approccio abituale è quello di animare l'altezza di un DIV esterno che ha un singolo figlio che è un DIV senza stile utilizzato solo per misurare l'altezza del contenuto.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

Si vorrebbe solo essere in grado di fare a meno del .measuringWrapper e basta impostare l'altezza del DIV su auto e farlo animare, ma non sembra funzionare (l'altezza viene impostata, ma non si verifica alcuna animazione).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

La mia interpretazione è che è necessaria un'altezza esplicita per l'animazione da eseguire. Non è possibile ottenere un'animazione in altezza quando l'altezza (l'altezza iniziale o finale) è auto.


64
2018-06-30 13:32



So che questa è la risposta trentacinquesima a questa domanda, ma penso che ne valga la pena, quindi ecco qui. Questo è un CSS-only soluzione con le seguenti proprietà:

  • Non c'è ritardo all'inizio e la transizione non si ferma presto. In entrambe le direzioni (espandibile e collassabile), se si specifica una durata della transizione di 300 ms nel CSS, la transizione richiede 300 ms, punto.
  • Sta cambiando l'altezza attuale (a differenza di transform: scaleY(0)), quindi fa la cosa giusta se c'è del contenuto dopo l'elemento collassabile.
  • Mentre (come in altre soluzioni) lì siamo numeri magici (come "scegli una lunghezza che è più alta di quanto la tua scatola sarà mai"), non è fatale se la tua ipotesi finisce per essere sbagliata. In questo caso, la transizione potrebbe non sembrare sorprendente, ma prima e dopo la transizione, questo non è un problema: nell'espansione (height: auto), l'intero contenuto ha sempre l'altezza corretta (a differenza, ad esempio, se si sceglie a max-heightche risulta essere troppo basso). E nello stato collassato, l'altezza è zero come dovrebbe.

dimostrazione

Ecco una demo con tre elementi collassabili, tutti di altezze diverse, che utilizzano tutti lo stesso CSS. Potresti voler fare clic su "Pagina intera" dopo aver fatto clic su "Esegui snippet". Si noti che il solo JavaScript attiva il collapsed Classe CSS, non è necessario misurare. (Potresti fare questa demo esatta senza alcun JavaScript usando una casella di controllo o :target). Si noti inoltre che la parte del CSS responsabile della transizione è piuttosto breve e che l'HTML richiede solo un elemento wrapper aggiuntivo.

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});
.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

Come funziona?

Ci sono in effetti Due transizioni coinvolte nel fare in modo che ciò accada. Uno di loro transizioni il margin-bottom da 0px (nello stato espanso) a -2000px nello stato collassato (simile a questa risposta). Il 2000 qui è il primo numero magico, si basa sul presupposto che la tua casella non sarà più alta di questa (2000 pixel sembra una scelta ragionevole).

Usando il margin-bottom la transizione da sola ha due problemi:

  • Se in effetti hai una scatola che supera i 2000 pixel, allora a margin-bottom: -2000px non nasconderà tutto - ci saranno cose visibili anche nel caso collassato. Questa è una piccola correzione che faremo più tardi.
  • Se la casella effettiva è, per esempio, alta 1000 pixel e la transizione è lunga 300ms, allora la visibile la transizione è già finita dopo circa 150ms (o, nella direzione opposta, inizia 150ms in ritardo).

La correzione di questo secondo problema riguarda l'arrivo della seconda transizione e questa transizione si concentra sul target del wrapper minimo altezza ("concettualmente" perché non stiamo effettivamente utilizzando il min-height proprietà per questo; più su quello più tardi).

Ecco un'animazione che mostra come combinare la transizione del margine inferiore con la transizione minima dell'altezza, entrambe di uguale durata, ci dà una transizione combinata dall'altezza completa all'altezza zero che ha la stessa durata.

animation as described above

La barra sinistra mostra come il margine inferiore negativo spinge il basso verso l'alto, riducendo l'altezza visibile. La barra centrale mostra come l'altezza minima garantisce che nel caso di compressione, la transizione non termini presto e, nel caso in espansione, la transizione non inizi in ritardo. La barra a destra mostra come la combinazione dei due fa sì che la scatola passi da piena altezza a zero nella giusta quantità di tempo.

Per la mia demo ho scelto 50px come valore minimo dell'altezza superiore. Questo è il secondo numero magico, e dovrebbe essere inferiore a quello che l'altezza della scatola sarebbe mai stata. 50px sembra ragionevole; sembra improbabile che tu voglia molto spesso rendere un elemento collassabile che non sia nemmeno alto 50 pixel in primo luogo.

Come potete vedere nell'animazione, la transizione risultante è continua, ma non è differenziabile - nel momento in cui l'altezza minima è uguale all'altezza totale regolata dal margine inferiore, vi è un improvviso cambiamento di velocità. Questo è molto evidente nell'animazione perché usa una funzione di temporizzazione lineare per entrambe le transizioni e perché l'intera transizione è molto lenta. Nel caso reale (la mia demo in alto), la transizione richiede solo 300ms e la transizione del margine inferiore non è lineare. Ho giocato con molte diverse funzioni di cronometraggio per entrambe le transizioni e quelle con cui ho avuto l'impressione di aver funzionato meglio per la più ampia varietà di casi.

Rimangono due problemi da risolvere:

  1. il punto dall'alto, in cui le caselle di altezza superiore a 2000 pixel non sono completamente nascoste nello stato compresso,
  2. e il problema inverso, dove nel caso non nascosto, le caselle con un'altezza inferiore a 50 pixel sono troppo alte anche quando la transizione non è in esecuzione, poiché l'altezza minima le mantiene a 50 pixel.

Risolviamo il primo problema dando l'elemento contenitore a max-height: 0 nel caso collassato, con a 0s 0.3s transizione. Ciò significa che non è davvero una transizione, ma il max-height è applicato con un ritardo; si applica solo una volta che la transizione è finita. Perché funzioni correttamente, dobbiamo anche selezionare un numero max-height per lo stato opposto, non collassato. Ma a differenza del caso 2000px, dove la selezione di un numero troppo grande influisce sulla qualità della transizione, in questo caso, non importa. Quindi possiamo solo scegliere un numero che è così alto che noi conoscere che nessuna altezza si avvicinerà mai a questo. Ho scelto un milione di pixel. Se ritieni che potresti dover supportare contenuti di altezza superiore a un milione di pixel, allora 1) Mi dispiace, e 2) aggiungi solo un paio di zeri.

Il secondo problema è il motivo per cui non stiamo effettivamente utilizzando min-height per la transizione di altezza minima. Invece, c'è un ::after pseudo-elemento nel contenitore con a height quella transizione da 50px a zero. Questo ha lo stesso effetto di a min-height: Non permetterà che il container si riduca al di sotto di qualsiasi altezza abbia lo pseudoelemento. Ma perché stiamo usando heightno min-height, ora possiamo usare max-height (ancora una volta applicato con un ritardo) per impostare l'altezza effettiva dello pseudo-elemento a zero una volta terminata la transizione, assicurandosi che almeno al di fuori della transizione, anche gli elementi piccoli abbiano l'altezza corretta. Perché min-height è più forte di max-height, questo non funzionerebbe se usassimo il container min-height invece dello pseudo-elemento height. Proprio come il max-height nel paragrafo precedente, questo max-height ha anche bisogno di un valore per la parte opposta della transizione. Ma in questo caso possiamo solo scegliere il 50px.

Testato su Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (ad eccezione di un problema di layout della flexbox con la mia demo che non ha disturbato il debugging) e Safari (Mac, iOS ). Parlando di flexbox, dovrebbe essere possibile farlo funzionare senza l'utilizzo di alcun flexbox; infatti penso che potresti far funzionare quasi tutto in IE7, tranne per il fatto che non avrai transizioni CSS, rendendolo un esercizio piuttosto inutile.


45
2018-05-14 14:33



Una soluzione visiva per animare l'altezza usando le transizioni CSS3 è invece di animare il padding.

Non si ottiene abbastanza l'effetto wipe, ma giocare con i valori di durata di transizione e padding dovrebbe avvicinarti abbastanza. Se non vuoi impostare in modo esplicito altezza / altezza massima, questo dovrebbe essere quello che stai cercando.

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (sfogliato da stephband sopra jsFiddle)


44
2018-06-26 19:05



La mia soluzione alternativa è di passare dall'altezza massima all'altezza del contenuto esatto per un'animazione fluida, quindi utilizzare un callback transitionEnd per impostare l'altezza massima su 9999px in modo che il contenuto possa essere ridimensionato liberamente.

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>


43
2018-03-19 00:44



La risposta accettata funziona per la maggior parte dei casi, ma non funziona bene quando il tuo div può variare notevolmente in altezza: la velocità dell'animazione non dipende dall'altezza effettiva del contenuto e può sembrare instabile.

Puoi ancora eseguire l'animazione effettiva con i CSS, ma devi usare JavaScript per calcolare l'altezza degli elementi, invece di provare a usare auto. Non è richiesto jQuery, anche se potrebbe essere necessario modificarlo un po 'se si desidera la compatibilità (funziona nell'ultima versione di Chrome :)).

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}
#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}
<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


31
2017-10-20 22:57



Uso max-height con diversi tempi di transizione e di ritardo per ogni stato.

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

Vedi esempio: http://jsfiddle.net/0hnjehjc/1/


23
2017-12-16 23:35