Share
Onze mobiele browsers worden steeds krachtiger en beter in het tonen van verbazingwekkende, mooie animaties. In combinatie met de layout-kracht van CSS is het mogelijk om prachtig werk te maken zonder enige afbeeldingen te gebruiken. Het resultaat is schaalbaar, snel laden en goed, indrukwekkend om te zien.
Laten we eens kijken naar wat verbazingwekkende dingen mensen maken en animeren met alleen HTML en CSS.
Er gebeurt hier zoveel, het is moeilijk te geloven dat het gewoon HTML en CSS is! Draaiende animaties en meerdere, gelaagde bewegingen zorgen ervoor dat het lijkt alsof deze fietser en zijn fiets van gelei zijn gemaakt. Mooi gebruik van BEM in de klasse benaming ook!
Door veel bewegende delen te combineren, kan een eenvoudige set HTML-elementen een meer complexe animatie lijken, en dat is iets wat deze demo goed doet. Zie hoe de twee planeten op elkaar inwerken, terwijl de lusvormige "deeltjes" net voldoende verspreid zijn om willekeurig te lijken.
Eenvoudig gekleurde lagen lijken misschien niet veel, maar als ze bewegen, kunnen ze heel veel karakter overbrengen. In dit voorbeeld is een reeks semi-transparante HTML-alineatags geanimeerd en is de resulterende gestapelde animatie hypnotiserend.
We hebben niet altijd JPG's of PNG's nodig om prachtige afbeeldingen te maken, en dit is nog een voorbeeld. Eén container-div en vier anderen is alles wat nodig is om dit heerlijk te bekijken, laaiend ijsje met ijs-thema te maken. De resulterende code is veel kleiner dan een geanimeerde GIF zou zijn.
Wanneer u artistiek gebruik van HTML-elementen combineert met sommige met tekens gevulde animaties, is dit het resultaat. Een ongelooflijk soepele maar toch drukke animatie vol plezier. Enorm respect voor Julia Muzafarova voor wat ongelooflijk onhandig werk is geweest bij het bouwen van al die sets keyframes. Meer dan een paar koffies ook!
Door het samenbrengen van veel eenvoudige HTML-elementen met een heleboel subtiele, leuke animaties, heeft deze slaperige kat veel karakter. In dit voorbeeld wordt Sass gebruikt en variabelen om de animatie te besturen. Probeer een aantal te veranderen om te zien wat er gebeurt!
Soepele animaties kunnen worden bereikt bij het gebruik van HTML en CSS, vooral als we enkele basisprincipes volgen. Deze animatie houdt het aantal elementen tot een minimum beperkt en maakt veel gebruik van transformaties.
Snelle animaties kunnen veel karakter toevoegen wanneer ze worden gecombineerd. In deze demo kun je zien hoe bubbels en spetters samen worden gechoreografeerd om leuke animaties te maken met een vrolijke spons, allemaal zonder afbeeldingen.
Een reeks keyframe-animaties kan een verhaal vertellen of mensen helpen te begrijpen waar ze naar kijken. Hier zien we een envelop openen en een brief krijgen.
Een beetje subtiele beweging kan grote gevoelens van intensiteit creëren! Deze lader heeft een auto die eruit ziet alsof hij te snel rijdt, alles gemaakt met een paar elementen en CSS-animaties. Zonder afbeeldingen zou dit snel laden.
Bedankt zoals altijd aan CodePen en de creatieve geesten achter deze demo's; ze hebben ons zeker veel inspiratie gegeven in deze animatievoorbeelden. Bekijk de volgende berichten voor meer van hetzelfde, en om te leren hoe u uw eigen CSS-animaties kunt maken!
Accentsconagua