30 Cool CSS-animationer du måste se
Vi har tidigare publicerat de kreativa texteffekterna du kan göra med CSS, och många andra coola saker du inte trodde var möjligen att göra med CSS. Denna sammanställning fokuserar emellertid på de många saker du kan animera med CSS, och många av dessa skapelser får dig att höja ett ögonbryn eller två.
Från att ladda animeringar till växlar och modala fönster för att skaka element, denna hög av 30 ovanliga och kreativa användningsområden av CSS-animering kan öppna ditt sinne för fler sätt du kan spela med CSS-animationer som du nog aldrig har tänkt på.
CSS Loading Animation Av patrikhjelm
Sju animerade prickar som skiftar åt vänster och höger för att signifiera en laddningsåtgärd.
Animerad kundvagn ikon av jonitrythall
Söt animerade effekter för när matvaror läggs till i kundvagnen. Bläddra ner för mer.
Hamburger CSS3 bara animering av Dawid Krajewski
Byggd med ren CSS, ingen JS eller något annat.
404 animerad karaktär av med en es
Åtminstone med denna fel sida arbetar en utvecklare med den. Även om det är en 404.
CSS Mars Landning vid mgitch
Vi har landat på Mars! Gjord med CSS.
Avenger By mariosmaselli
Kan du höra hulks ilska skaka genom skärmen? Cool, höger?
Dag / natt växla av jsndks
Nu kan du växla dag och natt med CSS. Genius idé!
Google Now 3rd party app av codecalm
Google Nu tredje part apps, animerade.
Clo clo Av judag
Flytta en hane så? Du slår vad det gör, komplett med jiggy nacken. Bra CSS3-övning.
Menyikon animering av mariusbalaj
En enkel idé läggs till handling titta på menyknappen när du rullar ner.
En annan CSS Preloader av Maseone
En fantastisk CSS rytmisk laddningsanimering. Hypnotisk, är det inte?
Skicka in knappen av auginator
Klicka för att skicka in, och knappen animerar laddningsprocessen tills inlämningen är klar!
Elastiskt SVG Sidebar Material Design av suez
Dra den vita fältet till höger för att se en elastisk sidobar effekt.
Partikelknapp Genom igcorreia
Gör vad knappen säger: sväva för awesomeness.
Gooey knapp Av Lucas Bebber
Klicka för Gooey-effekten. Du får det när du ser det, och du klickar på det några gånger mer. Amirite?
Flipside-knapp Av hakimel
Klicka på någon sida av Delete-knappen och knappen bläddrar enligt var du klickar.
Sann hamburger meny! Av CharlesSmart
En riktigt utsökt hamburgare meny. Klicka på hamburgeren för effekter
Cruisin 'av dig
Se motorcykel gå.
3D-kubvåg av waddington
Heliga 3D-kubisiklar!
Signatur animation Genom drygiel
Här är en signatur som inte är en GIF-animation, utan en PNG-sekvens animerad med CSS3.
Bakgrundsgradientanimering Genom quasimondo
Detta trick ändrar bakgrundsgradienten från en färg till den andra i en jämn, kontinuerlig form.
Star wars toggle icon Av rss
En hamburgermeny blir förvandlad till ljuskärl i strid (ett kors).
GIF Style animation Av jascha
Titta som ett foto materialiseras mitt i pixelkonsten.
Fokusera in / ut inmatningsanimering Med fluxus
En liten animerad penna animerad skriver ovanför det du fyller i.
Kromatisk triangelBy felipedefarias
En fantastisk optisk illusion, ja, gjort med CSS3.
Kaffebryggare Av thisisroger
Här är en påminnelse att ta din dagliga dos kaffe. Som du behöver en.
Chrome Dinosaur Av nickspiel
Kan inte nå den sida du vill ha av en tappad anslutning? Här är dinosaurier som du alltid ser när det händer, bara den här gången går det från en meteorit!
CSS skaka Av elrumordelaluz
Haka över varje effekt för att se den lilla killen skaka.
Newtons vagga lastare av alla saker Smitty
Om du känner till fysik vet du säkert Newtons vagga, men förmodligen inte så här.
Starta Modal By koolhaus
Klicka för att se det fina och smidiga modala fönstret.
Walking Robot Av P233
Den här roboten fortsätter att gå och gå och gå runt Y-axeln.
Flexing Pagination Arrows av Hakim
Från den första sidan till den sista visar den här pagineringsanimationen tydligt hur om du går, sidvis.
Nu läser: 15 vackra texteffekter skapade med CSS
