CSS Transitions forklaret

Den enkleste (og mest ligefremme) måde at animere dine komponenter på er gennem CSS-overgange. I denne artikel lærer du, hvordan CSS-overgange fungerer, og hvordan man laver animationer med det.

En overgang opstår, når en CSS-egenskab skifter fra en værdi til en anden værdi over en periode.

Du kan oprette CSS-overgange med transitionejendommen:

.selector { transition: property duration transition-timing-function delay; }

Den transitionegenskab er en forkortelse af fire CSS egenskaber, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyhenviser til den CSS-ejendom, du ønsker at overføre. Det kræves i transitionstenografien.

transition-durationhenviser til varigheden af ​​overgangen. Hvor længe vil du have overgangen til at vare? Denne værdi skrives i sekunder med ssuffikset (som 3s). Det kræves også i transitionstenografien.

transition-timing-functionhenviser til, hvordan overgang sker. Du lærer mere om dette senere.

transition-delayhenviser til hvor længe du vil vente, før varigheden startes. Denne værdi skrives i sekunder med ssuffikset (som 3s). transition-delayer valgfri i transitionstenografien.

Udløsende overgange

Du kan udløse CSS-overgange direkte med pseudoklasser som :hover(aktiveres, når musen går over et element), :focus(aktiveres, når en bruger klikker på et element, eller når en bruger klikker på et inputelement), eller :active(aktiveres, når brugeren klikker på elementet ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Du kan også udløse CSS-overgange via JavaScript ved at tilføje eller fjerne en klasse.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Forståelse af overgangs-timing-funktion

Det transition-timing-functionstyrer, hvordan en overgang sker. Alle overgange har en værdi linearsom standard, hvilket betyder, at ejendommen ændres jævnt indtil slutningen af ​​overgangen.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Sagen er, at få ting bevæger sig lineært i livet. Sådan bevæger ægte objekter sig ikke. Nogle gange accelererer vi; nogle gange bremser vi op. Det transition-timing-functiongiver dig mulighed for at fange alt dette.

Forestil dig dig selv at kaste en tennisbold på et åbent felt. Bolden efterlader din hånd med den maksimale hastighed. Når det bevæger sig, mister det energi, det aftager og til sidst stopper. Dette kaldes ease-out. Der er en timing-funktion til det.

.selector { transition-timing-function: ease-out; }

Forestil dig nu, at du er i en bil. Det bevæger sig ikke lige nu. Når du bevæger bilen, accelererer den og går mod sin højeste hastighed. Dette kaldes ease-in. Der er også en timing-funktion til det.

.selector { transition-timing-function: ease-in; }

Da du har ease-inog ease-out, er der også en timing-funktion, der kombinerer de to sammen ease-in-out. (Jeg fraråder at bruge ease-in-outi dine overgange, medmindre dine overgange varer længere end et sekund. Intet letter ind og ud inden for et sekund. Det ser simpelthen underligt ud.)

.selector { transition-timing-function: ease-in-out; }

Se denne pen for en demo af de timingfunktioner, du har lært indtil videre:

Endelig, hvis du ikke kan lide nogen af ​​ovenstående valg, kan du oprette din egen timing-funktion med cubic-bezier.

Oprettelse af din egen tidsfunktion med kubisk bezier

En Cubic-bezier er et sæt af fire værdier, der bestemmer din overgangs-timing-funktion. Det ser sådan ud:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Må ikke bekymre dig om det x1, y1,, x2og y2. Du opretter aldrig kurver med kubik-bezier ved selv at skrive tal (medmindre du allerede ved, hvad de betyder, og du tilpasser din timing-funktion til perfektion).

Du kan stole på både Chrome og Firefox's pålidelige udviklerværktøjer til at hjælpe dig med at oprette dine kurver. For at bruge det tilføjer du et transition-timing-functiontil et element, åbner derefter devtools og klikker på timing-funktionen.

Se pen CSS-overgangstidsfunktioner af Zell Liew (@zellwk) på CodePen.

At gå i dybden med at oprette dine egne bezier-kurver til dine animationer er uden for anvendelsesområdet for dagens artikel. Hvis du er interesseret, kan du finde mere information om kurver med kubisk bezier i “Forståelse af CSS-tidsfunktioner” af Stephen Greig.

Overgang af to eller flere egenskaber

You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property.

You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

You may be tempted to transition every CSS property with all. Don’t ever do this. This is bad for performance. Always specify the property you’re trying to transition.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Transitioning in vs transitioning out

Sometimes, you want the properties to transition in and out at differently. You want the duration, timing-function or delay to be different.

To do so, you write another set of transition- properties.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Husk at ændre din, transition-timing-functionså din animation ser mere ægte ud!

Hvis du elskede denne artikel, vil du elske at lære Learn JavaScript - et kursus, der hjælper dig med at lære at opbygge ægte komponenter fra bunden med JavaScript.

(Åh, forresten, hvis du kunne lide denne artikel, ville jeg sætte pris på det, hvis du kunne dele den.)

Oprindeligt offentliggjort på zellwk.com.