38 Inspirerende CSS3-animatiedemo's

Sinds de introductie van CSS3, zijn er echt veel hete debatten draaien om de mogelijkheden en bruikbaarheid. Er zijn echter ook veel interessante experimenten met de hand gemaakt om het potentieel ervan te verkennen. Hoewel de experimenten met alle mogelijke middelen de bruikbaarheid van de CSS3 niet bewijzen, toonden ze echt de ware mogelijkheden van CSS3, tot op zekere hoogte dat grote ontwikkelaars geloven dat de CSS3 de toekomst is.

Is dat waar? Beoordeel het met je ogen. In deze showcase zullen we niets anders laten zien dan alleen 38 inspirerende op CSS3 gebaseerde animatiedemo's die puur het ware potentieel van de CSS3 ontdekken. Naast de pure experimenten, ziet u ook enkele praktische voorbeelden van hoe CSS3 kan worden toegepast in webdesign om het zoeter en sexier te maken.

Genoeg gezegd, laten we de fantastische wereld van CSS3 verkennen!

Mogelijk bent u ook geïnteresseerd in:

Beginnershandleiding voor CSS3
Een CSS3-zoekvak voor rocken maken
HTML5 / CSS3-webpagina's bouwen
Sierlijk broodkruimel navigatiemenu in CSS3
Maak een op Ajax gebaseerd HTML5 / CSS3-contactformulier
35 Graphics puur opgebouwd met CSS3
meer…

We raden u ten zeerste aan om deze demo's te bekijken met de nieuwste versie van Safari of de ontwikkelaarversie van Google Chrome. De meeste demo's ondersteunen echter de nieuwste versie van Firefox en Google Chrome.

Geanimeerde 3D-helix

De eerste in de lijst is een ongelooflijke animatie gemaakt door Marcofolio.net, met behulp van CSS3 3D-transformaties. De animatie lijkt op magie zelf, maar je kunt ook leren om hetzelfde effect te creëren met de zelfstudie in het artikel!

Geanimeerde knoppen

Een must-see voor webdesigners, want de demo toont niet alleen de mogelijkheden van CSS3-animatie, maar biedt ook erg coole en praktische knopeffecten voor inspiratie!

Animatiemenu's

Probeert u uw animatiemenu's leuker te maken om ze er echt gaaf en creatief uit te laten zien? Deze demo is voor jou.

AT-AT Walker

Een inspirerende animatiedemo die het potentieel van CSS3 toont bij het animeren van een eenheid met lichaamsdelen.

Battlefield CSS3

Battlefield CSS3 met veel explosies en geweerschoten!

Big Deal

Het is de soepele en leuke animatie die deze demo tot een groot succes heeft gemaakt.

Can Haz Ur Cursor?

“Hallo, ik ben het Cursormonster. Mijn vader heeft een boodschap voor je: 'Alstublieft, gebruik het niet cursor: none, behalve als je een cursoretend monster maakt '.”

CSS Dock

Een sexy experiment dat lijkt op het dock van de Mac OS X, en het is echt soepel.

CSS3 Man

Kijk uit, hier komt de CSS3-man! Perfect voorbeeld om het ware potentieel van CSS3-animatie te laten zien.

Dribbble Ball Bouncing

Met het kleine gebruik van grafische tricks komt een leuke en grappige CSS3-animatie.

Dulla

Dulla toont zo'n beetje een van de meest gebruikte technieken om een 2D-platformgame te maken, wat nu ook mogelijk is met CSS3.

Beeld per beeldanimatie

Frame voor frame animatie met CSS3? Geen probleem!

Grafiekanimatie

Een eenvoudige maar krachtige animatie waarmee u de grafiek op uw site kunt weergeven / uitleggen, kunt leren om deze te maken!

hoog

Een mysterieuze muziekanimatie die afbeeldingen van Google Dynamisch in realtime weergeeft en de afbeeldingen zijn gebaseerd op de songtekst.

Effecten zweven

De toekomst van het hover-effect wordt geleverd met CSS3. Slank en veelbelovend.

Ik ben Joseph Barrett

CSS3 geïntegreerd in de social media-iconen van de portfoliosite. Het is niet alleen leuk maar toont ook de creativiteit van de ontwerper.

Oneindige zoom

Gladde animatie, ook een leuke manier om met je portfolio te pronken. De totale zoomlens voor de 26 afbeeldingen is 67108864: 1.

Kinect en CSS3

“14 body-verbindingen worden bijgehouden en omgezet in een korte CSS-animatie met Xbox Kinect. De body-gegevens worden in de browser geplaatst waar wordt geparseerd en geconverteerd naar CSS-animaties met animatable.com.”

Matrix

Wil je net zo cool zijn als Matrix? Met de CSS3 kun je het maken.

Morphing Cubes

Experimentele demo om de CSS3 te verkennen met behulp van 3D-transformaties, animaties en overgangen. Het interessante deel hier is dat je nog steeds de tekst op de elementen kunt selecteren, zelfs wanneer ze nog steeds draaien.

Ons zonnestelsel

U hebt geen dure stand-alone software nodig om studenten te helpen het zonnestelsel te verkennen.

Duff Roll

“Mmmmmm .... Homer zou dol zijn op de eindeloze voorraad bier.”

Postercirkel

Een eenvoudig maar interessant voorbeeld om u te laten zien hoe u CSS-transformatie en -animatie gebruikt om een interessant effect te bereiken.

Reverend Danger

Wie kan een website weerstaan met hele leuke karakters en grappige animaties?

Rofox

Naadloze en leuke animatie, haal de broncode op om het zelf te proberen!

Shaun het schaap

“Bekijk de capriolen van Shaun en zijn vrienden in clips van 'An Ill Wind', 'Snowed In', 'The Big Chase' en 'Twos Company' door middel van een interactief experiment gemaakt met hardware-versnelde HTML5-video, 3D CSS Transforms en WebM.”

Ruimte

Misschien is ruimte de laatste limiet voor CSS3.

Space CaCSS

Creër een magisch effect als dit is niet echt moeilijk met CSS3, want er zijn voornamelijk gewoon herhalende radiale gradiënt en background-size betrokken. Variaties zijn mogelijk met een redelijke hoeveelheid aanpassingen.

Star Wars Crawl

Het kruipeffect van de Star Wars-opening! Net zo episch als CSS3.

Het expressieve web

Het expressieve web introduceert niet alleen de CSS3 en de ondersteuning, referentie en documentatie van de browser, maar toont ook een verbluffende CSS3-animatie op zijn webpagina.

De briefkoppen

Typen gebruiken om een schaduw te creëren die lijkt op het gezicht van een mens, wie zou gedacht hebben dat dit mogelijk zou zijn met CSS3?

The Man from Hollywood

Heb je ooit die aantrekkelijke animaties gezien met pure typografie? Nou, je kunt het ook met CSS3 doen.

Het planetarium

Gewoon epische demo over het verkennen van het planetarium met details. SVG, JavaScript, HTML5, CSS3, lettertypen en typen zijn hierbij betrokken.

Type Rains

“De verwachting voor vandaag, in de veronderstelling dat je een moderne browser gebruikt, is bewolkt, met een 100% kans op Georgia-buien.”

Typografie-effecten

Naast knop-, menu- en zweefeffecten, kun je ook creatieve typografie-effecten bereiken met CSS3. jQuery is ook betrokken bij deze demo om de letters van de woorden te stylen.

Wandelen met Andrew Hoyer

Het beste van alles is dat je ook leert om met Andrew Hoyer in het artikel te lopen!

Wonder Webkit

Een prachtig gebruik van CSS3 3D-transformaties met JavaScript Matrix-bibliotheek. Klinkt technisch, maar het resultaat is razendsnel.

Zoetrope

Wat kun je nog meer niet met CSS3 doen als Zoetrope er mee mogelijk is?

Reflectie

Inspirerende? Ja. Praktisch? Misschien. Animatietechniek is altijd een onderwerp voor ontwikkelaars en animators, omdat het een bepaald niveau van kennis vereist om echt vloeiende, unieke en stijlvolle animaties te produceren. Hoewel CSS3 de mogelijkheid heeft om de animatie te doen, betekent dit niet dat het een geschikt hulpmiddel voor animatie is. Ik denk dat het uiteindelijk nog steeds om jouw voorkeur gaat, wat mij betreft, ik ben in orde met beide, zolang de tool maar voldoet aan de behoeften van het project.

Wat is jouw mening over deze CSS3-animaties? Zijn deze CSS3-animaties alleen geschikt als experimenten, of kunnen ze ook worden toegepast in het real-life webontwerp? Zoals gewoonlijk zijn we blij met je waardevolle gedachte over het onderwerp en laten we ook je favoriete stukje CSS3-animatie weten!

Meer

Gewoon laten zien, echt? Je verdiende om meer te krijgen! Hieronder vindt u de tutorials en handleidingen van CSS3 van Hongkiat voor u om ze leuk te verkennen!