Download in corso

Softwareone.it

TransitionsHelper Puzzle CSS3

La nuova specifica HTML5 / CSS3 incorpora uno strumento molto potente per gestire le animazioni semplici, transizioni.

le transizioni CSS3 permettono il cambiamento dei valori CSS progressivamente nel corso di un certo periodo di tempo.

vi consiglio di leggere css3-transitions

Un piccolo esempio su come utilizzare CSS3 transition per lo sviluppo di un semplice gioco di tipo puzzle.

Come si può leggere sul sito del W3C, CSS3 Transitions consente di creare variazioni progressive sui seguenti tipi di proprietà:

  • Colore: interpolazione tra il verde componenti blu e rosse, alfa, (trattare ogni come un numero, come si vedrà più avanti).
  • Lunghezza: interpolazione tra i valori espressi in numeri reali.
  • Percentuale: interpolazione tra i valori espressi in numeri reali.
  • Integer: interpolati in passi discreti (numeri interi). Interpolazione avviene nello spazio dei numeri reali e convertito in un numero intero utilizzando il piano (funzione).
  • Numero: interpola tra i valori espressi come numeri reali (in virgola mobile).
  • Elenco di trasformazione: Le trasformazioni possono vedere le specifiche CSS: https://www.w3.org/TR/css3-2d-transforms/ .
  • Rettangolo: il X e Y i valori sono interpolati, ei componenti di larghezza e altezza (tutti questi valori vengono trattati come numeri).
  • Visibilità: interpolati in passi discreti. Interpolazione verifica nello spazio dei numeri tra zero, 1, dove 1 significa “visibile” e gli altri valori sono “nascosti” (hidden).
  • Ombra: valori di colore, coordinate x e y, e componente blur (sfocatura) sono interpolati, cercando tutti i valori come il colore o il numero a seconda dei casi.
  • Gradiente: i valori di posizione e il colore sono interpolati ad ogni fermata. Essi devono essere dello stesso tipo (lineare o radiale) e con lo stesso numero di soste per eseguire l’animazione.
  • Disegno di server (SVG): interpolazione è supportata solo per le transizioni sfumate e colore gradiente.

Per dichiarare una transizione in CSS

transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;

possiamo anche definire le transizioni singolarmente per ogni proprietà

transition-property: opacity left top;
transition-duration: 0.5s 0.8s 0.1s;
transition-timing-function: ease linear ease;
transition-delay: 0s 0s 1s;

possiamo usare la proprietà abbreviata “transizione” per definire tutto ciò che serve in una sola riga

transition: opacity 0.5s ease 0s, left 0.8s linear 0s;

Demo Game

Download Demo

05-01-2019
Pubblicità