Share
Tegenwoordig gebruiken steeds meer websites animaties, of dat nu in de vorm is van GIF's, SVG's, WebGL, achtergrondvideo's enzovoort. Wanneer het op de juiste manier wordt gebruikt, zorgt animatie op het web voor leven en interactiviteit, waardoor een extra laag feedback en ervaring voor gebruikers wordt toegevoegd.
In deze tutorial ga ik je kennis laten maken met CSS-animaties; een zeer performante manier om dingen te doen die steeds populairder worden naarmate browserondersteuning verbetert. Nadat we de basis hebben behandeld, gaan we een snel voorbeeld bouwen dat een vierkant element in een cirkel animeert:
De ontwerpers op Envato Market zijn bezig geweest met het maken van een reeks CSS-animaties die u kunt aansluiten op uw websites, van schaduwen tot linten, schuifregelaars en meer.
CSS3 Shadow Pack op Envato MarketU kunt ook een CSS-expert bij Envato Studio inhuren om u te helpen met een breed scala aan oplossingen en aanpassingen voor uw project.
CSS-experts op Envato StudioHet belangrijkste onderdeel van CSS-animaties is @keyframes, de CSS-regel waar animatie wordt gemaakt. Denken aan @keyframes als zijnde etappes langs een tijdlijn. Binnen @keyframes, u kunt deze fasen definiëren, elk met een andere stijlverklaring.
Om vervolgens CSS-animaties te laten werken, moet u binden aan de @keyframes naar een selector. Dit zal geleidelijk alle code in de code ontleden @keyframes aangiften en verander de oorspronkelijke stijl in de nieuwe stijl, op basis van de fasen.
Hier zullen we de animatiefasen instellen. Onze @keyframes eigenschappen zijn:
Bijvoorbeeld:
@keyframes tutsFade 0% opacity: 1; 100% dekking: 0;
of:
@keyframes tuts Fade from opacity: 1; tot opacity: 0;
of de afkorting:
@keyframes tutsFade to opacity: 0;
De bovenstaande code past een overgang toe naar de dekking van een element, van dekking: 1 naar dekking: 0. Elk van de bovenstaande benaderingen zal hetzelfde eindresultaat opleveren.
De animatie eigenschap wordt gebruikt om te bellen @keyframes in een CSS-selector. Animatie kan meerdere eigenschappen hebben:
Accentsconagua
animatie-naam: @keyframes naam (onthoud dat we hebben gekozen tutsFade).animatie-duur: de tijdsduur, de totale duur van de animatie van begin tot eind.animatie-timing-functie: stelt de animatiesnelheid in ( lineair | gemak | gemak in | gemak | gemak in-uit | kubieke Bezier ).animatie-delay: de vertraging voordat onze animatie start.animatie-iteratie-count: Hoe vaak wordt animatie herhaald.animatie-richting: geeft u de mogelijkheid om de lusrichting te wijzigen, van begin tot eind, of van begin tot eind, of beide.animatie-fill-mode: geeft aan welke stijlen op het element worden toegepast wanneer onze animatie is voltooid ( geen | vooruit achteruit beide )Bijvoorbeeld:
.element animation-name: tuts Fade; animatie-duur: 4s; animatie-vertraging: 1s; animatie-iteratie-telling: oneindig; animatie-timing-functie: lineair; animatie-richting: alternatief;
of steno:
.element animation: tuts Fade 4s 1s oneindige lineaire alternatief;
De bovenstaande code zorgt voor een knipperend effect, met een vertraging van 1 seconde, een totale duur van 4 seconden, met een alternatieve richting en oneindige lus-iteraties.
Tijdens een werkende versie moeten we browser-specifieke voorvoegsels gebruiken om de best mogelijke browser-ondersteuning te garanderen. De standaardprefixen zijn van toepassing:
-webkit- -moz- -O- -Mevrouw- Een animatie de eigenschap met voorvoegsels van leveranciers ziet er als volgt uit:
.element -webkit-animation: tuts Fade 4s 1s oneindige lineaire alternatief; -moz-animation: tuts Fade 4s 1s oneindig lineair alternatief; -ms-animatie: tuts Fade 4s 1s oneindige lineaire alternatief; -o-animatie: tuts Fade 4s 1s oneindige lineaire alternatief; animatie: tuts Fade 4s 1s oneindig lineair alternatief;
samen met @keyframes:
@ -webkit-keyframes tutsFade / * jouw stijl * / @ -moz-keyframes tutsFade / * jouw stijl * / @ -ms-keyframes tuts Fade / * jouw stijl * / @ -o-keyframes tuts Fade / * jouw stijl * / @keyframes tutsFade / * jouw stijl * /
Ten behoeve van de leesbaarheid tijdens deze tutorial ga ik verder zonder gebruik te maken van voorvoegsels, maar de definitieve versie zal ze bevatten en ik zou u willen aanmoedigen om ze in uw CSS-code te gebruiken.
Voor meer informatie over voorvoegsels van leveranciers kunt u http://css3please.com/ raadplegen, wat een geweldige website is voor resources van leveranciersprefixen.
U kunt meerdere animaties toevoegen met behulp van een kommascheider. Laten we zeggen dat we een extra rotatie aan onze willen toevoegen tutsFade element, doen we dit door extra te declareren @keyframes en ze vervolgens aan ons element te binden:
.element animation: tuts Fade 4s 1s oneindig lineair alternatief, tutsRotate 4s one oneindig lineair alternatief; @keyframes tutsFade to opacity: 0; @keyframes tutsRotate to transform: rotate (180deg);
Laten we erin springen en een eenvoudige vormovergang maken; een vierkant-tot-cirkel-animatie met behulp van de bovenstaande principes. We zullen in totaal vijf fasen hebben en voor elke fase zullen we een grensradius, een rotatie en een andere achtergrondkleur definiëren voor ons element. Genoeg gepraat, laten we beginnen met coderen.
Laten we eerst de markup maken, een element om te animeren. We gaan ons zelfs niet bezighouden met klassenamen, we gaan nu gewoon een duidelijke div gebruiken:
Vervolgens met behulp van een elementselector (div ), Voeg standaard styling toe aan de div:
div width: 200px; hoogte: 200 px; achtergrondkleur: koraal;
Laten we ons nu voorbereiden @keyframes, die we zullen noemen af-to-cirkel, en de vijf fasen
@keyframes square-to-circle 0% 25% 50% 75% 100%
We moeten enkele styes definiëren binnen deze stadia, dus laten we beginnen met het dicteren van de border-radius voor elke hoek van het plein:
@ -webkit-keyframes square-to-circle 0% border-radius: 0 0 0 0; 25% grensradius: 50% 0 0 0; 50% grensradius: 50% 50% 0 0; 75% grensradius: 50% 50% 50% 0; 100% grensradius: 50%;
Daarnaast kunnen we een andere declareren Achtergrond kleur voor elke fase.
@keyframes square-to-circle 0% border-radius: 0 0 0 0; achtergrond: koraal; 25% grensradius: 50% 0 0 0; achtergrond: darksalmon; 50% grensradius: 50% 50% 0 0; achtergrond: indianred; 75% grensradius: 50% 50% 50% 0; achtergrond: lightcoral; 100% grensradius: 50%; achtergrond: darksalmon;
Om echt het idee naar huis te raken, laten we verder gaan border-radius en Achtergrond kleur door de div te draaien en een beetje visueel belang toe te voegen.
@keyframes square-to-circle 0% border-radius: 0 0 0 0; achtergrond: koraal; transform: rotate (0deg); 25% grensradius: 50% 0 0 0; achtergrond: darksalmon; transform: draaien (45deg); 50% grensradius: 50% 50% 0 0; achtergrond: indianred; transform: draaien (90deg); 75% grensradius: 50% 50% 50% 0; achtergrond: lightcoral; transform: rotate (135deg); 100% grensradius: 50%; achtergrond: darksalmon; transform: rotate (180 graden);
Nadat we onze vierkant-naar-cirkel-animatie hebben gedefinieerd, moeten we deze toepassen op de div:
div width: 200px; hoogte: 200 px; achtergrondkleur: koraal; animatie: vierkant-naar-cirkel 2s one oneindig alternatief;
Hier zie je dat we een afkorting hebben toegevoegd animatie eigendom, waarin staat:
af-to-cirkel.2s.1s.oneindig, dus het zal voor onbepaalde tijd doorgaan.afwisselend, dus het zal van begin tot eind spelen, dan terug naar het begin, dan weer tot het einde, enzovoort. Een laatste waarde die we aan de animatie-eigenschap kunnen toevoegen, is de animatie-timing-functie. Dit zal de snelheid, versnelling en vertraging van onze beweging bepalen. Deze functie kan een zeer gedetailleerde waarde zijn, wat lastig is om handmatig te berekenen, maar er zijn veel gratis websites die bronnen en live aanpassing bieden voor animatietimingfuncties.
Eén zo'n tool is de CSS Easing Animation Tool, dus laten we dat gebruiken om onze timingfunctie te berekenen.
Ik zou graag een toevoegen elastisch effect op onze af-to-cirkel animatie, met behulp van een cubic-bezier-functie.
Nadat je hebt gespeeld met de handvatten en een soort beziercurve hebt gegenereerd, werk je de waarde van de animatietimingfunctie bij met behulp van het verstrekte fragment.
div width: 200px; hoogte: 200 px; achtergrondkleur: koraal; animatie: vierkant-naar-cirkel 2s 1s oneindige cubic-bezier (1, .015, .295,1.225) alternate;
De definitieve code, zonder gebruik te maken van voorvoegsels van leveranciers ( -webkit- , -moz-, -Mevrouw-, -O- ) is als volgt:
div width: 200px; hoogte: 200 px; achtergrondkleur: koraal; animatie: vierkant-naar-cirkel 2s .5s oneindige cubic-bezier (1, .015, .295,1.225) alternate; @keyframes square-to-circle 0% border-radius: 0 0 0 0; achtergrond: koraal; transform: rotate (0deg); 25% grensradius: 50% 0 0 0; achtergrond: darksalmon; transform: draaien (45deg); 50% grensradius: 50% 50% 0 0; achtergrond: indianred; transform: draaien (90deg); 75% grensradius: 50% 50% 50% 0; achtergrond: lightcoral; transform: rotate (135deg); 100% grensradius: 50%; achtergrond: darksalmon; transform: rotate (180 graden);
Alles werkt goed in moderne browsers, maar Firefox heeft een vervelende gewoonte om het transformeren van objecten slecht te maken. Bekijk deze gekartelde regels om te zien wat ik bedoel:
Gelukkig is hier een oplossing voor. Voeg de volgende transparante omtrek toe aan uw div en Firefox zal de dingen perfect weergeven!
overzicht: 1px solide transparant;
Dat is het! We hebben de CSS-animatiesyntaxis gebruikt om een eenvoudige, herhaalde animatie te maken.
Voor actuele informatie over de ondersteuning van browsers voor CSS-animaties, kijk op Kan ik gebruiken ... maar in een notendop, ondersteunen browsers onder meer: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.
