Animate.css - CSS3-bibliotheek Eenvoudig animaties maken

CSS is verbeterd met veel functies die webontwikkeling veel interessanter en uitdagender maken. Een van deze functies is CSS3-animatie-effecten . Vóór CSS3, om een ​​animatie te maken, kunt u alleen met Javascript werken. Maar nu kun je het gemakkelijk maken met CSS3.

We hebben je uitgebreid leren kennen met een goede tutorial over het maken van Bounce Effect met CSS3, en in dit artikel zal ik je een geweldige bibliotheek voorstellen die het maken van animaties met CSS3 nog eenvoudiger zal maken: Animate.css .

Animate.css is een kant-en-klare bibliotheekverzameling van CSS3-animatie-effecten . Deze bibliotheek biedt u meer dan 50 verschillende animatie-effecten die consistent op de meeste browsers werken met CSS3-ondersteuning.

U kunt de animatie vervolgens toepassen op uw tekst, afbeelding, formulier enzovoort. Er zijn ook veel geweldige sites die deze bibliotheek gebruiken; Tridiv - de beste CSS 3D-editor op het web - is daar een van.

Ermee beginnen

Met Animate.css hoeft u alleen maar de juiste klassen met uw elementen op te nemen . Om te beginnen, neemt u eerst het bestand animate.css op in de kop . U kunt de volledige bibliotheek downloaden van de Github-repositorypagina.

Animate.css wordt standaard slechts één keer geactiveerd bij het laden van de eerste pagina . Het blijft dan statisch. Om de animatie te kunnen bedienen, hebben we een beetje Javascript nodig. In dit geval zullen we een jQuery in het project opnemen, zoals zo.

 ...  ... 

HTML-markup

Om de animatie toe te passen, moet u .animated class toevoegen aan het element dat u wilt animeren, samen met de animatienaam zoals dit.

 Deze tekst zal animeren. 

Dat is het! De animatie wordt alleen geïmplementeerd bij het laden van de pagina, dus u moet mogelijk ook Javascript gebruiken om de animatie toe te passen bij een gebeurtenistrigger. De .option kan ook worden aangepast aan uw behoeften.

Aanvullende CSS-opties

De animatie die we eerder hebben gedefinieerd, wordt slechts eenmaal herhaald en ook op een vooraf gedefinieerde duur en vertragingstijd. Als u meer loops of een andere duur of vertragingstijd nodig heeft, kunt u dit als volgt aanpassen.

Als u de animatie meerdere keren of zelfs oneindig wilt laten lussen, kunt u het attribuut animation-iteration-count . Zorg ervoor dat u ook de toepasselijke voorvoegsels van leveranciers opneemt, zoals webkit, moz, enzovoort. Om het oneindig te maken, voegt u infinite als waarde.

Als je het nodig hebt om maar een paar keer te herhalen, voer je de waarde in met het aantal gewenste lussen.

 -verkoper-animatie-iteratie-telling: oneindig |  ; 

Om de duur aan te passen, is het geschikte attribuut om te gebruiken de duur van de animation-duration ; en zijn animation-delay voor vertragingscontrole. Het volgende is een voorbeeldoptiecode.

 .optie {-webkit-animatie-duur: 3s; -webkit-animatie-vertraging: 2s; -webkit-animatie-iteratie-telling: 5; } 

Javascript-besturing

Voor meer controle over de animatiestatus hebben we een beetje hulp nodig van Javascript. Stel dat we een tekstlink willen om een ​​animatie met een klik te activeren. Allereerst moeten we een verwijzing toevoegen aan de link, zoals zo.

Deze tekst zal animeren.

Als u de click wilt gebruiken, neemt u de linkreferentie erin op.

Met Javascript kunt u de naam van de animatie definiëren. We zullen een benadering gebruiken door een animate te maken en de animatie een naam te geven samen met de elementklasse (in de bovenstaande code hebben we het demo kenmerk toegevoegd).

En de Javascript-code zal het volgende leuk vinden.

Animatie-effect is inderdaad een van de beste manieren om uw site aantrekkelijker te maken, maar vergeet niet om het niet te overdrijven.

10 Belangrijke AMP-componenten (Accelerated Mobile Pages) die u moet kennen

Versnelde mobiele pagina's of AMP is het initiatief van Google om het mobiele web sneller te maken . Om dit doel te bereiken, beperken de AMP-standaarden de manier waarop u HTML, CSS en JavaScript kunt gebruiken en beheert u het laden van externe bronnen, zoals afbeeldingen, video's en advertenties via de eigen runtime

(Technische en ontwerptips)

35 websites om gratis STL-modellen voor 3D-printers te downloaden

3D-ontwerpen en printen is een van de geschenken van moderne innovatie en technologie. Het is zo mainstream geworden dat bedrijven nu handige 3D-printers verkopen voor persoonlijk gebruik. Als u alleen een 3D-printer bezit, komt u echter nergens. U moet het materiaal en vooral de blauwdrukken in de vorm van STL-modellen hebben

(Technische en ontwerptips)