Come usare le transizioni CSS3

Tutti amano il movimento. L'aggiunta della quarta dimensione (tempo) al design di un sito è il modo principale in cui il design basato sullo schermo si distingue dal design della stampa. Le transizioni CSS sono un metodo semplice per l'animazione delle proprietà di un elemento che consente di arricchire determinati eventi nel tuo web design, senza bisogno di Flash o JavaScript.

Il W3C descrive giustamente le transizioni sul loro sito web come "Transizioni CSS consente modifiche di proprietà nei valori CSS che si verificano senza intoppi nel corso di una durata specificata". In altre parole, le transizioni CSS ci permettono di modificare una proprietà in modo incrementale, creando una sensazione di movimento e infondendo disegni con sottigliezza ed emozione che non è possibile con un rapido cambiamento.

Supporto per il browser

Tutti i browser moderni (sì, persino IE!) Ora supportano le transizioni CSS. Tuttavia, aspetto importante, se le transizioni non sono supportate nel browser utilizzato, la transizione viene ignorata e le modifiche alle proprietà verranno applicate immediatamente. Questo grazioso degrado è una pietra miliare delle migliori pratiche.

Per estendere la gamma di supporto del browser, possiamo utilizzare i prefissi dei fornitori, estendendo la funzionalità a Firefox 4-15, Opera 10.5-12 e la maggior parte delle versioni di Chrome e Safari. Il codice, incluse le alternative del prefisso del venditore, assomiglia a questo:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

La proprietà non prefissata viene aggiunta nella parte inferiore della pila per garantire che l'implementazione finale superi tutte le altre, mentre la proprietà si sposta dalla bozza allo stato finito.

Parametri di transizione

Esistono quattro parametri per le transizioni CSS:

• transition-property: la proprietà da interpolare o la parola chiave 'all' da applicare a tutte le proprietà;
• durata della transizione : la durata della transizione;
• transizione-temporizzazione: l'attenuazione da applicare, crea un movimento più naturale
• Transtion-delay: specifica un ritardo all'inizio della transizione.

Inoltre, è possibile utilizzare anche la proprietà abbreviata (come nell'esempio precedente) in cui i parametri sono specificati come proprietà, durata, funzione di temporizzazione, ritardo.

Proprietà che possono essere trasferite

Puoi solo convertire le proprietà che possono essere tradotte in un valore matematico. Ad esempio, puoi cambiare la dimensione del font; non è possibile la transizione di font-face.

L'elenco completo delle proprietà che possono essere attualmente trasferite è il seguente:

background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, colore, font-size, font-weight, height, left, letter-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max- width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical- allinea, larghezza, spaziatura delle parole, z-index.

Usando le transizioni

Le dichiarazioni di transizione sono allegate allo stato normale dell'elemento. Pertanto, dichiarato una sola volta per diversi stati come: focus,: classi attive e pseudo.

Usando il seguente codice possiamo impostare un menu base e un paragrafo di testo. È stato progettato in modo che le voci del menu cambino colore e colore di sfondo quando vengono capovolte e in modo che il collegamento in linea modifichi il colore della sottolineatura da bianco a verde quando si posiziona il puntatore del mouse su:

Business
  Codice 
  Design 
  Ispirazione 
  miscellaneo 
  Mobile 
  notizia 
  risorse 
  usabilità 
  Integer posuere erat un collegamento inline ante   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Integer posuere erat a ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Ecco come appare:

Usi le transizioni CSS3? Quali effetti sei stato in grado di creare? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine in movimento via Shutterstock.