I veri numeri dietro i CSS sono facili da usare
Progetta una funzione di temporizzazione CSS cubic-bezier() personalizzata trascinando due punti di controllo, visualizzane l'anteprima in tempo reale rispetto a un riferimento lineare, quindi copia il valore pronto.
Risultato
Questa pagina apre il generatore cubic-bezier con x1=0.42, y1=0, x2=0.58, y2=1 già caricati: gli esatti punti di controllo a cui si espande la parola chiave easy-in-out CSS. Trascina una delle maniglie o modifica direttamente i numeri e la curva, l'anteprima dell'animazione e la stringa copiabile si aggiorneranno immediatamente.
easy-in-out è una delle cinque parole chiave di timing CSS integrate, ed è popolare proprio perché questa curva accelera dolcemente fin dall'inizio, mantiene un ritmo abbastanza uniforme nella parte centrale e si abbassa prima della fine: una forma che risulta naturale per la maggior parte dei movimenti dell'interfaccia utente. Vedendolo come punti di controllo espliciti invece che come nome di una parola chiave è ovvio il motivo: y1 si trova vicino a 0 e y2 si trova vicino a 1, entrambi vicini alla x corrispondente, quindi non c'è superamento in nessuna delle direzioni.
Usa questi quattro numeri come punto di partenza piuttosto che la parola chiave stessa ogni volta che hai bisogno di modificare leggermente la sensazione: abbassa x1 per un inizio più scattante o premi y2 sopra 1 per trasformare questa stessa forma in un leggero superamento. Ogni modifica aggiorna istantaneamente l'anteprima e la riga cubic-bezier() copiabile.