Il questo tutorial impareremo ad usare il keyframes.
Ancora una volta ci ritroveremo a lavorare con i prefissi.

Certo, potremo usare le transizioni combinate con un dei intervalli di javascript. Ma ecco una lista di ottimi motivi per il quale usare le animazioni

• Browser che usano antialiasing, perdono un sacco di memoria nel cambiare tra ottimizzazione qualità e non se usiamo Js


• Usando Css, la pagina rimane piu leggera


• Si possono calcolare meglio i tempi


• È piu Figo

La sintassi è la seguente:


Io non so che dire apparte WOW, Abbiamo un animazione funzionante.
Ovviamente dobbiamo farlo per ogni browser adesso


Wow, bello, ma adesso? Adesso cosa viene animato?
Aspettate, dobbiamo ancora specificarlo

Ecco la sintassi

ovvero:
animation: [Nome dato al animazione] [durata animazione] [ripetizione animazione]


Novamente aggiungiamo i prefissi


Ecco fatto, con questo codice si possono tranquillamente creare slideshows. Un mio compagno di classe ha usato le animazioni, per creare uno sfondo che cambiasse continuamente con l'opacità.
I modi come applicare questa tecnica sono molti e sono utili le remote cose.

Un carissimo saluto Flexlex

Le trasformazioni sono leggere (per i browser) ma potenti (per l'occhio umano) cambiamenti per un oggetto.

Sono effetti visivi molto interesanti.

le proprietà di transform sono "rotate, scale, skew, translate", poi ci sono ancora le prorieta' 3D per i browser WEBKIT (safari 3+ e chrome 20+)

le trasformazoni 2d sono suportate da tutti i browser, a parte IE da partire della versione 9
le trasformazioni trovano luogo al centro del oggetto

facciamoli tutti una alla volta

rotate

girare l'oggetto di totali degrees (gradi)



nuovamente API sperimentali, quindi nuovamente prefissi.


scale








con questa proprieta, possiamo ingrandire l'oggetto. letteralmente scalarlo. anche in due assi diferenti.
valore 1: ingrandimento in larghezza
valore 2: ingrandimento in altezza

se viene definito solo un valore, il secondo valore equivale il primo



skew
sempre con uno o due valori in gradi possiamo inclinare l'oggetto desiderato






translate
sposta l'oggetto di TOT pixel o percentuale.
per esempio 100% significa sposta a destra quanto l'oggetto stesso e' largo
...

Read the whole post...

Quante volte volevamo creare un animazione fluida e bella da vedere? senza scrivere 30 righe in Javascript, per ottenere alla fine una transizione pesante e noiosa?

da oggi non c'e' più problema.
Cosa ne pensate della transizione in home? quella per passare da "standard" ad "avanzato"?

ci credete se vi dico che e' un codice che occupa una sola riga? le transizioni sono di nuove API sperimentali e hanno per questo bisogni di avere il prefisso per ogni browser. i Browser piu potenti come safari e chrome usano l'Hardware del Computer per ottenere un'animazione fluida che non rallenta la navigazione.

ci sono 2 modi per definire le transizioni

1) Metodo "lungo"


Analizziamo:
transition-property cosa deve venire (assume il valore delle proprieta')
transition-timing-function mette un disequilibrio nella velocita del animazione (ease-in, ease, ease-out, ease-in-ou, linear e poi c'e' cubic-bezier[molto complicato])
transition-delay attesa prima del animazione (assume valore numerico seguito da "s", esempio: 1s)
transition-duration quanto dura in totale l'animazione (assume sempre valore numerico seguito da una "s")

il codcie sarebbe piu o meno cosi.



Beh, non e' molto corto come codice, ma come ho fatto quindi a creare il codice in una riga?
facile, con la sintassi rapida.

In Css 3 ci sono tante novita, ma una delle piu interessanti e molto usata sono le sfumature o anche sonfdi gradienti. Niente piu sprechi di Tempo su Photoshop per creare la sfumatura giusta.

esistono due sintassi

1) solo webkit (vecchi browser)

risultato (con browser webkit, quindi chrome, safari, safari mobile e andoird browser)

Analiziamo

background-image:<b> come nel css2 dichiara uno sfondo
<b>-webkit-gradient invece di "none" viene dichiarato una gradienza
lienar le grazienze posso essere dritte oppure circle, quindi a cerchio
left top punto di partenza
left bottom punto fine (si puo fare anch eiun diagonale, lungo il div)
from da (equivale a color-stop(0, COLORE) ) con quale colore iniziare
color-stop aggiunge un colore nel punto desiderato
-0.5 punto desiderato 0=inizio 1=fine 0.5=metta 0.25=un qurto del percorso
-[colore]
to ultimo colore ( corrisponde a color-stop(1, COLRE) )

Gli altri browser?

2) tutti i piu' recenti
si, non possiamo lasciare gli altri browser.

tra l'altro questi hanno una sintassi piu semplice (vale anche per i browser webkit piu recenti)

Analiziamo

background-image uguale a prima
linear-gradient indica una sfonod gradiente linear
top punto di inizio automaticamente la sfumatura va al lato/angolo opposto)
black color
0 inizio (0%)
purple colore
50% metta'
yellow colore
100% fine

ogni browser ha un proprio prefisso perche sono API sperimentali, quindi
Webkit: Per chrome, safari, andoird, safari mobile, PSVita, PS3, Rock melt
Moz:(Geeko) firefox
O: Opera e Opera mini (alcune versioni)
MS(microsoft):Internet Explorer

quindi il codice completo sarebbe cosi: