30 coole CSS-animaties die je moet zien

We hebben eerder de creatieve teksteffecten die je kunt maken met CSS gepubliceerd, en veel andere coole dingen waarvan je dacht dat ze mogelijk niet met CSS konden maken. Deze compilatie concentreert zich echter op de vele dingen die je met CSS kunt animeren, en veel van deze creaties zullen je een wenkbrauw of twee opvoeden.

Van het laden van animaties tot wissels en modale vensters tot het schudden van elementen, deze stapel van 30 ongewoon en creatief gebruik van CSS-animatie kan je geest openen voor meer manieren waarop je kunt spelen met CSS-animaties waar je waarschijnlijk nog nooit eerder aan hebt gedacht.

CSS Animatie laden Door patrikhjelm

Zeven geanimeerde puntjes die links en rechts verschuiven om een ​​laadactie te betekenen.

Geanimeerd winkelwagenpictogram door jonitrythall

Leuke geanimeerde effecten voor wanneer boodschappen aan het winkelwagentje worden toegevoegd. Scroll naar beneden voor meer informatie.

Hamburger CSS3 enige animatie van Dawid Krajewski

Gebouwd met pure CSS, geen JS of iets anders.

404 geanimeerde Character By With An Es

In ieder geval met deze foutpagina, werkt een ontwikkelaar eraan. Zelfs als het een 404 is.

CSS Mars Landing door mgitch

We zijn geland op Mars! Gemaakt met CSS.

The Avenger Door mariosmaselli

Hoor je de woede van hulk door het scherm te schudden? Cool toch?

Dag / Nacht-schakelaar Door jsndks

U kunt nu dag en nacht wisselen met CSS. Geniaal idee!

Google Now app van derden door codecalm

Google Nu apps van derden, geanimeerd.

Clo clo Door judag

Beweegt een haan zo? Wedden dat het dat doet, compleet met de jiggy nek. Geweldige CSS3-oefening.

Menupictogram-animatie door mariusbalaj

Een eenvoudig idee in werking gezet; let op de menuknop die verschijnt wanneer je naar beneden scrolt.

Nog een CSS Preloader van Maseone

Een geweldige CSS-ritmische laadanimatie. Hypnotiserend, is het niet??

Knop verzenden door auginator

Klik om in te dienen en de knop animeert het laadproces totdat de inzending voltooid is!

Elastic SVG Sidebar Material Design door suez

Versleep de witte balk naar rechts om een ​​elastisch zijbalkeffect te zien.

Deeltjesknop Door igcorreia

Doe wat de knop zegt: zweef naar awesomeness.

Gooey-knop door Lucas Bebber

Klik voor het Gooey-effect. Je krijgt het zodra je het ziet en je klikt er nog een paar keer op. amirite?

Flipside-knop Door hakimel

Klik op een willekeurige kant van de knop Verwijderen en de knop draait naar de plaats waar u klikt.

Echte hamburgermenu! Door CharlesSmart

Een echt heerlijk hamburgermenu. Klik op de hamburger voor effecten

Cruisin 'door yy

Zie motor gaan.

3D-kubusgolf Door waddington

Holy 3D Cube-sicles!

Signatuur animatie Door drygiel

Hier is een handtekening die eigenlijk geen GIF-animatie is, maar in plaats daarvan een PNG-reeks geanimeerd met CSS3.

Achtergrondverloopanimatie door quasimondo

Deze truc verandert de achtergrondgradiënt van de ene naar de andere kleur in een vloeiende, ononderbroken vorm.

Star Wars-wisselsymbool Door rss

Een hamburger-menu verandert in lichtzwaard (een kruis) in lichtzwaard.

GIF-stijlanimatie door jascha

Kijk hoe een foto uit het midden van pixelart materialiseert.

Focus in / out-invoeranimatie Door fluxus

Een kleine geanimeerde pen geanimeerd schrijft boven op de forom die je invult.

Chromatische driehoek. Met een felipedefarias

Een geweldige optische illusie, ja, gedaan met CSS3.

Koffiezetapparaat By thisisroger

Hier is een herinnering om uw dagelijkse dosis koffie te nemen. Alsof je er een nodig hebt.

Chrome-dinosaurus door nickspiel

Kan de gewenste pagina niet worden bereikt vanwege een verbroken verbinding? Hier is de dinosaurus die je altijd ziet wanneer dat gebeurt, maar deze keer rent het van een meteoriet!

CSS shake Door elrumordelaluz

Beweeg over elk effect om de kleine man te zien schudden.

Newton's Cradle Loader van All Things Smitty

Als je de natuurkunde kent, ken je de wieg van Newton zeker, maar waarschijnlijk niet zo.

Lanceer de Modal By koolhaus

Klik om de mooie en soepele modale vensteranimatie te zien.

Walking Robot door P233

Deze robot blijft gewoon rondlopen en lopen en lopen rond de Y-as.

Pijlen van paginering buigen door Hakim

Van de eerste tot de laatste pagina, deze pagineringanimatie laat duidelijk zien hoe het met u gaat, pagewise.

Nu lezen: 15 prachtige teksteffecten gemaakt met CSS