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.

Meest waardevolle merken van 2017 in een land [Infographic]

Heb je je ooit afgevraagd wat het grootste merk ter wereld is ? Als je dat doet, zal deze infographic van Howmuch.net je interesseren, want het is een kaart die de meest waardevolle merken van 2017 laat zien, evenals de kracht van het merk, in een aantal landen over de hele wereld. Hoewel de kaart niet de meest waardevolle merken van alle landen weergeeft, worden op de kaart enkele van de grootste merken ter wereld vermeld

(Technische en ontwerptips)

30+ tools om je Flickr-ervaring te verbeteren

Flickr is een populair online beeldplatform en is een revolutie voor het delen en beheren van foto's, en het heeft een enorme gemeenschap van fotografen die hun werk de wereld laten zien om te zien.En om u te helpen optimaal gebruik te maken van het geweldige platform van Flickr, zijn er een aantal tools die veel aan uw ervaring kunnen toevoegen

(Technische en ontwerptips)