Video: JavaScript og CSS3 transitions 2025
Hvis dit mål er at formidle information kreativt på din hjemmeside til visning på iPad eller iPhone, er en af de bedste muligheder for at tilføje animation og andre interaktive funktioner at bruge CSS 3. CSS 3 introducerer tre hovedmåder til at skabe interaktive effekter og animationer: transformationer, overgange og animationer.
CSS 3 tilføjer mange nye designfunktioner, men animation er den mest spændende. Ved hjælp af CSS 3 kan du få tegn til at gå på tværs af skærmen, bokse flip over og billeder falmer væk. For at demonstrere, hvordan animationen virker med CSS 3, viser denne figur en simpel bold, der hopper i en sort boks.
Der blev ikke brugt billeder til at skabe denne hoppende boldanimation. Kuglen selv - og den handling, der får det til at springe fra toppen af skærmen til bunden og tilbage igen - blev alle opnået med blot et par linjer CSS 3-kode.
Animationer som dette arbejde i de fleste populære browsere, der bruger WebKit, herunder Safari (på Mac, Windows og iOS til iPad / iPhone / iPad) og Chrome (på Mac, Windows og enheder, der kører Googles Android-operativsystem).
Du kan oprette mange flotte designeffekter med disse funktioner, men de mest interaktive websteder, du ser på nettet, kræver i dag JavaScript sammen med HTML og CSS.
