Sådan bruges CSS3 Overgange & Animationer til at fremhæve UI-ændringer

Designere og kunstnere har en lang historie med at eksperimentere med bevægelser, effekter og forskellige slags illusioner med det formål at tilføje et ekstra lag til deres arbejde. Op kunstbevægelsen begyndte at bruge optiske illusioner i 1960'erne for at give indtryk af bevægelse.

Siden da har nyere og nyere tilgange blændet op, såsom den nyligt populære kinetiske kunst, der udvider seernes perspektiv ved at bruge flerdimensionel bevægelse. Motion optrådte også i datalogi med opfindelsen af ​​den første blinkende markør i 1967.

I front-end-udvikling blev DOM-elementer normalt animeret af JavaScript før CSS3 blev udgivet, og det er en metode, der stadig fungerer, men Nye ejendomme introduceret af CSS3 giver os mulighed for at forbedre vores designs med forskellige effekter og bevægelse på en mere intuitiv måde.

De to vigtigste teknikker CSS3 tilbyder er overgange og animationer. I dette indlæg vil vi se på, hvad de er, hvad er forskellen mellem dem, og hvordan du kan gøre brug af dem.

Overgange

Overgange og animationer bruges begge til visualisere ændringer i staten af et HTML element af ændre en eller flere af sine CSS egenskaber.

Den enkleste form for tilstandsændring visualisering ændrer farven på en knap eller et link, når det svæves. Når det sker, får elementet en lidt anden stil, som normalt ses af seeren som om noget er flyttet på skærmen.

Ændring af CSS-egenskaber for et link på svæver (eller fokus eller klik) er den ældste og enkleste form for overgange, og den eksisterede før CSS3-æraen.

 en farve: orange;  a: svever farve: rød;  a: fokus farve: blå;  a: besøgte farve: grøn; 

Overgange bruges, når et HTML-element skifter fra en foruddefineret tilstand til en anden. CSS3 introducerede nye egenskaber, der muliggør mere sofistikerede visualiseringer end tidligere, f.eks. Timingfunktioner eller varighedskontrol.

Vi vil se på de nye CSS-egenskaber i næste afsnit, efter at have forstået, hvordan animationer er forskellige. Lad os nu se de vigtigste ting, du har brug for at vide om overgange.

1. De har altid en begyndelse og en slutstat.
2. Staterne mellem start- og slutpunkterne er implicit defineret af browseren, vi kan ikke ændre det med CSS.
3. De kræver eksplicit udløsende, f.eks. tilføjelse af en ny pseudoklasse ved CSS eller en ny klasse af jQuery.

Du kan se et smukt eksempel på smart udnyttede CSS3 overgange nedenfor, hvor forfatteren afslører skjulte oplysninger på en måde, der ikke er påtrængende, men stadig styrer brugernes fokus på det nye indhold.

Animationer

Hvis vi ønsker at visualisere tilstandsændringer med mere komplicerede bevægelser, eller hvis vi ikke har en eksplicit trigger, f.eks. hvis vi ønsker at starte effekten, når siden indlæses, animationer er vejen at gå.

Animationer gør det muligt at definere en mere kompleks sti ved at indstille og konfigurere vores egne keyframes. keyframes er mellemliggende punkter i løbet af animationen, som gør det muligt for os at ændre stilen på det animerede element så mange gange, som vi ønsker.

Selvom CSS3 tilbyder gode måder at opbygge avancerede animationer på, er det normalt sværere at oprette dem end overgange, derfor er der mange gode animationsbiblioteker derude, som kan lette vores arbejde.

De vigtigste ting, du skal vide om CSS3-animationer, omfatter:

1. de kræver ikke eksplicit udløsning, de kan starte på sideindlæsning eller når en anden DOM-begivenhed finder sted i browseren
2. de kan bruges i tilfælde, hvor overgange bruges, for eksempel når en ny klasse eller pseudoklasse tilføjes eller fjernes (selvom det er en mindre hyppig brugstilstand)
3. de kræver, at vi definerer nogle keyframes (mellemliggende stater)
4. vi kan angive antallet, frekvensen og stilen på disse keyframes

I eksemplet nedenfor kan du se en cool animeret rullemenu. Animationen starter, når vi klikker på knappen. Dette opnås ved at tilføje ekstra klasser til listelementerne med jQuery, når klikhændelsen opstår.

Disse nye klasser er animeret med specificeret @keyframes regler i CSS-filen. De ekstra klasser fjernes af jQuery, når brugeren klikker på knappen næste gang, og menuen bliver skjult igen.

CSS Egenskaber og @keyframes At-regel

Til overgange kan vi enten bruge overgang shorthandegenskab eller 4 enkelt overgangsrelaterede egenskaber: overgang-ejendom, overgang-varighed, overgang-timing-funktion, og overgang-forsinkelse. Shorthand-ejendommen indeholder alle de enkelte egenskaber i forkortet form.

Til animationer er der animation shorthand ejendom på vores hænder, som står for ingen mindre end 8 single animation egenskaber, nemlig animation-navn, animation-varighed, animation-timing-funktion, animation-forsinkelse, animation-iteration-count, animation-retningen, animation-fill-tilstand, og animation-play-tilstand.

Det vigtigste med både overgange og animationer er, at vi altid skal specificere CSS-egenskaberne, der vil blive ændret under tilstandsændringen. Med overgange ser det sådan ud:

 .element baggrund: orange; overgangsejendom: baggrund overgangsperiode: 3s; Overgangstidsfunktion: Indlæsning;  .element: svinge baggrund: rød; 

Vi specificerede baggrund ejendom, fordi dette er, hvad der vil blive ændret under overgangen.

Vi kan ændre mere end én CSS-ejendom i en overgang, i så fald vil koden ovenfor blive ændret som denne: overgangsejendom: baggrund, grænse;. Vi kan også bruge overgangsegenskab: alle;, hvis vi ikke ønsker at specificere hver ejendom separat.

Vi kan vælge stenografi overgang ejendom også. Hvis vi gør det, skal vi altid være opmærksomme på den rigtige rækkefølge af de indre egenskaber (se syntaksen i docs).

 .element baggrund: orange; overgang: baggrund 3s lethed;  .element: svinge baggrund: rød; 

Hvis vi ønsker at oprette en animation, skal vi angive de relaterede keyframes. CSS-egenskaberne skal ændres i separat defineret @keyframes at-regler. Her er et eksempel på, hvordan vi kan gøre dette:

 .element position: relative; animation-navn: slide; animation-varighed: 3s; animation-timing-funktion: let-in;  @keyframes slide 0% left: 0;  50% venstre: 200px;  100% venstre: 400px; 

I eksemplet ovenfor skabte vi en meget simpel glidende effekt. Vi definerede animation-navn, derefter bundet 3 keyframes til det, som vi specificerede i @keyframes slide ... at-regler. Procenterne henviser til animationens varighed, så 50% sker ved 1,5s i eksemplet.

Vi kunne bruge stenografi animation ejendom, eller kunne definere keyframes med den mere enkle fra til regere på følgende måde:

 .element position: relative; animation: slide 3s let-in;  @keyframes slide fra left: 0;  til venstre: 400px; 

Oprettelsen af ​​mere komplekse animationer er sin egen kunstform. Hvis du er interesseret, kan du læse to af vores animationstutorials om, hvordan du opretter en avanceret markeringsramme, og hvordan du opretter en bounce-effekt.

Når du bygger overgange og animationer, skal du vide det Ikke alle CSS-egenskaber kan animeres, så det er altid en god idé at kontrollere den ejendom, du vil ændre i CSS Animatable.

CSS3 animationer og overgange har arbejdet med leverandør præfikser i lang tid, som vi ikke behøver at bruge mere, men Mozilla Developer Network anbefaler stadig at tilføje -webKit præfiks for et stykke tid, da understøttelsen af ​​webkitbaserede browsere kun for nylig opnåede stabilitet.