CSS 3 Animationer för webbplatser

June 2

Om ditt mål är att förmedla information kreativt på din webbplats för visning på iPad eller iPhone, en av de bästa alternativen för att lägga animation och andra interaktiva funktioner är att använda CSS 3. CSS 3 införs tre huvudsakliga sätt att skapa interaktiva effekter och animationer: transformationer, övergångar och animeringar.

CSS 3 tillför många nya design, men animeringen är den mest spännande. Använda CSS 3, kan du göra karaktärer vandrar över skärmen, lådor flip över, och bilderna blekna bort. För att visa hur animation fungerar med CSS 3, visar denna figur en enkel boll som studsar i en svart låda.



Inga bilder har använts för att skapa denna studsande boll animation. Bollen själv - och de åtgärder som gör det verkar studsa från toppen av skärmen till botten och tillbaka igen - var alla uppnåddes med bara några rader med CSS 3-kod.

Animationer gillar detta arbete i de flesta populära webbläsare som använder WebKit, inklusive Safari (på Mac, Windows och iOS för iPad / iPhone / iPad) och Chrome (på Mac, Windows och enheter som kör Googles Android-operativsystem).

Du kan skapa många stora designeffekter med dessa funktioner, men de mest interaktiva webbplatser som du ser på webben idag kräver JavaScript förutom HTML och CSS.