CSS 3 animasjoner for nettsteder - dummies

Hvis målet ditt er å formidle informasjon kreativt på nettstedet ditt for å vise på iPad eller iPhone, er en av de beste alternativene for å legge til animasjon og andre interaktive funksjoner å bruke CSS 3. CSS 3 introduserer tre hovedveier for å lage interaktive effekter og animasjoner: transformasjoner, overganger og animasjoner.

CSS 3 legger til mange nye designfunksjoner, men animasjon er den mest spennende. Ved hjelp av CSS 3 kan du gjøre tegn gå over skjermen, bokser flippe over, og bildene falmer bort. For å demonstrere hvordan animasjon fungerer med CSS 3, viser denne figuren en enkel ball som hopper i en svart boks.

Ingen bilder ble brukt til å skape denne hoppende ballanimasjonen. Bollen selv - og handlingen som gjør at den ser ut til å hoppe fra toppen av skjermen til bunnen og tilbake igjen - ble oppnådd med bare noen få linjer med CSS 3-koden.

Animasjoner som dette arbeidet i de fleste populære nettlesere som bruker WebKit, inkludert Safari (på Mac, Windows og iOS for iPad / iPhone / iPad) og Chrome (på Mac, Windows og enheter som kjører Googles Android-operativsystem).

Du kan lage mange flotte designeffekter med disse funksjonene, men de mest interaktive nettstedene du ser på nettet, krever JavaScript i tillegg til HTML og CSS.