CSS3-overgangen en -animaties gebruiken om UI-wijzigingen te markeren

Ontwerpers en kunstenaars hebben een lange geschiedenis van experimenteren met beweging, effecten en verschillende soorten illusies met als doel een extra laag toe te voegen aan hun werk. De op-art-beweging begon in de jaren zestig optische illusies te gebruiken om de indruk van beweging te geven.

Sindsdien zijn nieuwere en nieuwere benaderingen uitgekomen, zoals de onlangs populaire kinetische kunst die het perspectief van de kijker vergroot door multidimensionale bewegingen te gebruiken. Motion verscheen ook in de informatica met de uitvinding van de eerste knipperende cursor in 1967.

In front-end development werden DOM-elementen meestal geanimeerd door JavaScript voordat CSS3 werd uitgebracht, en het is een methode die nog steeds werkt, maar de nieuwe eigenschappen geïntroduceerd door CSS3 stelt ons in staat om onze ontwerpen te verbeteren met verschillende effecten en beweging op een meer intuïtieve manier.

De twee belangrijkste technieken die CSS3 biedt, zijn overgangen en animaties. In deze post zullen we een kijkje nemen naar wat ze zijn, wat het verschil tussen hen is en hoe je ze kunt gebruiken.

Transitions

Overgangen en animaties worden beide gebruikt visualiseer veranderingen in de staat van een HTML-element door het aanpassen van een of meer van zijn CSS-eigenschappen.

De eenvoudigste vorm van statuswijzigingsvisualisatie is het wijzigen van de kleur van een knop of een koppeling wanneer deze is geplaatst. Wanneer dit gebeurt, krijgt het element een iets andere stijl, die meestal door de kijker wordt opgemerkt alsof iets op het scherm is verplaatst.

Het wijzigen van de CSS-eigenschappen van een link op zweeftekst (of focus of klik) is de oudste en meest eenvoudige vorm van overgangen, en deze bestond ruim voor het CSS3-tijdperk.

 een kleur: oranje;  a: hover color: red;  a: focus kleur: blauw;  a: bezocht kleur: groen; 

Overgangen worden gebruikt wanneer een HTML-element van de ene vooraf gedefinieerde status in een andere verandert. CSS3 heeft nieuwe eigenschappen geïntroduceerd die meer geavanceerde visualisaties mogelijk maken dan voorheen, zoals timingfuncties of tijdscontrole.

We zullen de nieuwe CSS-eigenschappen in de volgende sectie bekijken, nadat we hebben begrepen hoe animaties verschillen. Laten we voor nu de belangrijkste dingen bekijken die u moet weten over overgangen.

1. Ze hebben altijd een begin- en een eindstand.
2. De toestanden tussen de begin- en eindpunten worden impliciet gedefinieerd door de browser, we kunnen dat niet veranderen met CSS.
3. Ze vereisen expliciete triggering, zoals het toevoegen van een nieuwe pseudoclass door CSS, of een nieuwe klasse door jQuery.

Je ziet een mooi voorbeeld van slim benutte CSS3-overgangen hieronder, waarin de auteur verborgen informatie onthult op een manier die niet-opdringerig is, maar toch de aandacht van gebruikers richt op de nieuwe inhoud.

animaties

Als we statusveranderingen willen visualiseren met complexere bewegingen, of als we geen expliciete trigger hebben, bijvoorbeeld als we het effect willen starten wanneer de pagina wordt geladen, zijn animaties de beste keuze.

Animaties maken het mogelijk om een ​​complexer pad te definiëren door het eigen pad in te stellen en te configureren keyframes. keyframes zijn tussenliggende punten in de loop van de animatie, die ons in staat stelt om de stijl van het geanimeerde element zo vaak te veranderen als we willen.

Hoewel CSS3 geweldige manieren biedt om geavanceerde animaties te bouwen, is het meestal moeilijker om ze te maken dan overgangen, daarom zijn er veel geweldige animatiebibliotheken die ons werk kunnen vergemakkelijken.

De belangrijkste dingen die je moet weten over CSS3-animaties zijn onder meer:

1. ze vereisen geen expliciete triggering, ze kunnen beginnen met laden van pagina's of wanneer een andere DOM-gebeurtenis plaatsvindt in de browser
2. ze kunnen worden gebruikt in gevallen waarin overgangen worden gebruikt, bijvoorbeeld wanneer een nieuwe klasse of pseudoclass wordt toegevoegd of verwijderd (hoewel het minder vaak wordt gebruikt)
3. ze vereisen dat we een aantal keyframes definiëren (tussentoestanden)
4. we kunnen het aantal, de frequentie en de stijl van deze hoofdframes specificeren

In het onderstaande voorbeeld ziet u een cool geanimeerd vervolgkeuzemenu. De animatie begint wanneer we op de knop klikken. Dit wordt bereikt door extra klassen aan de lijstelementen toe te voegen met jQuery wanneer de klikgebeurtenis optreedt.

Deze nieuwe klassen zijn geanimeerd met opgegeven @keyframes regels in het CSS-bestand. De extra klassen worden verwijderd door jQuery wanneer de gebruiker de volgende keer op de knop klikt en het menu opnieuw wordt verborgen.

CSS-eigenschappen en de @keyframes At-Rule

Voor overgangen kunnen we de overgang steno-eigenschap, of 4 enkele transitie-gerelateerde eigenschappen: transitie-objecten, overgang duration, transitie-timing-functie, en transitie-delay. De steno-eigenschap bevat alle afzonderlijke eigenschappen in een verkorte vorm.

Voor animaties is er de animatie steno-eigendom in onze handen dat staat voor niemand minder dan 8 enkele animatie-eigenschappen, namelijk animatie-naam, animatie-duur, animatie-timing-functie, animatie-delay, animatie-iteratie-count, animatie-richting, animatie-fill-mode, en animatie-play-state.

Het belangrijkste met beide overgangen en animaties is dat we dat altijd doen moeten de CSS-eigenschappen opgeven die tijdens de statuswijziging worden gewijzigd. Bij overgangen ziet het er als volgt uit:

 .element achtergrond: oranje; overgangseigenschap: achtergrond; overgangsduur: 3s; overgang-timing-functie: gemak-in;  .element: hover background: red; 

We hebben het achtergrond eigendom, omdat dit tijdens de overgang wordt gewijzigd.

We kunnen meer dan één CSS-eigenschap in één overgang wijzigen, in dit geval zou de bovenstaande code als volgt worden gewijzigd: overgangseigenschap: achtergrond, grens;. We kunnen ook de overgangseigenschap: alles;, als we niet elke eigenschap afzonderlijk willen specificeren.

We kunnen de afkorting kiezen overgang eigendom ook. Als we dit doen, moeten we altijd letten op de juiste volgorde van de innerlijke eigenschappen (zie de syntaxis in de documenten).

 .element achtergrond: oranje; overgang: achtergrond 3s ease-in;  .element: hover background: red; 

Als we een animatie willen maken, moeten we de verwante opgeven keyframes. De CSS-eigenschappen moeten in apart gedefinieerd worden gewijzigd @keyframes at-regels. Hier is een voorbeeld van hoe we dit kunnen doen:

 .element positie: relatief; animatie-naam: dia; animatie-duur: 3s; animatie-timing-functie: gemak in;  @keyframes slide 0% left: 0;  50% left: 200px;  100% left: 400px; 

In het bovenstaande voorbeeld hebben we een heel eenvoudig glijeffect gecreëerd. We hebben de animatie-naam, dan zijn er drie keyframes aan gebonden die we hebben opgegeven in de @keyframes slide ... at-regels. De percentages verwijzen naar de duur van de animatie, dus 50% gebeurt bij 1.5s in het voorbeeld.

We kunnen de steno gebruiken animatie eigenschap, of de hoofdframes kunnen definiëren met het meest eenvoudige van naar regel op de volgende manier:

 .element positie: relatief; animatie: slide 3s ease-in;  @keyframes slide from left: 0;  tot left: 400px; 

Het maken van complexere animaties is zijn eigen vorm van kunst. Als je geïnteresseerd bent, kun je twee van onze instructievideo's over het maken van een geavanceerd selectiekader en het maken van een bounce-effect lezen..

Bij het bouwen van overgangen en animaties moet je dat weten niet alle CSS-eigenschappen kunnen worden geanimeerd, dus het is altijd een goed idee om de eigenschap die u wilt wijzigen te controleren in de CSS Animatable.

CSS3-animaties en -overgangen hebben lange tijd met voorvoegsels van leveranciers gewerkt, die we niet meer hoeven te gebruiken, maar het Mozilla Developer Network beveelt nog steeds aan om de -webkit voorvoegsel een tijdje, omdat de ondersteuning voor Webkit-gebaseerde browsers pas onlangs stabiliteit heeft bereikt.