Staten Endre Graderinger med CSS Overganger og Animasjoner

0
15

Tilbake i 2012, Internet Explorer 10 kom ut og, blant andre ting, er det endelig støttes CSS graderinger og, i tillegg til at evnen til å animere dem med bare CSS! Ingen annen nettleser som støttes dette på den tiden, men jeg var full av håp for fremtiden.

Dessverre, seks år har gått, og ingenting har endret seg i denne avdelingen. Kant støtter animere graderinger med CSS, akkurat som IE 10 gjorde tilbake da, men ingen annen nettleser har støtte for dette. Og mens animert bakgrunn-størrelse eller bakgrunn-posisjon eller opasitet eller rotasjon av en pseudo element i lag på toppen kan ta oss en lang vei i forhold til å oppnå kule effekter, disse løsningene er fortsatt begrenset.

Det er effekter vi ikke kan reprodusere uten å legge til mye ekstra elementer eller masse ekstra graderinger, som for eksempel “blinds effect” – se nedenfor.

Blindene effekt (live demo, Edge/ IE 10+).

I Kanten, får de ovennevnte effekt er oppnådd med en keyframe animasjon:

html {
bakgrunn: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
animasjon: persienner 1s letthet-i-ut uendelig alternativ;
}

@keyframes blinds {
{
background-image: linear-gradient(90deg, #f90 100%, #444 0);
}
}

Hvis det virker VÅTT, vi kan TØRKE det opp med en touch av Sass:

@funksjon blinds($åpne: 0) {
@return-linear-gradient(90deg, #f90 $åpne*100%, #444 0);
}

html {
bakgrunn: persienner() 50%/ 5em;
animasjon: persienner 1s letthet-i-ut uendelig alternativ;
}

@keyframes blinds {{ background-image: persienner(1) } }

Mens vi har gjort den koden vi skriver og hva vi trenger for å redigere den senere mye mer å vedlikeholde, vi har fortsatt repetisjon i samlet CSS og vi er begrenset av det faktum at vi kun kan animere mellom stopper med det samme enhet — mens animere fra 0% til 100% fungerer helt fint, prøver å bruke, 0 eller 0px i stedet for 0% resulterer i ingen animasjon skjer lenger. For ikke å nevne at Chrome og Firefox bare snu fra oransje til grå med ingen stopp-posisjonen animasjon i det hele tatt!

Heldigvis, disse dagene har vi et enda bedre alternativ: CSS variabler!

Rett ut av boksen, CSS variabler er ikke animatable, selv om vi kan få overgang (men ikke animasjon!) virkninger dersom eiendommen vi bruker dem for er animatable. For eksempel, når det brukes i en forvandle funksjon, vi kan overgangen forvandle eiendommen.

La oss se på et eksempel med en boks som blir flyttet og presset når en avmerkingsboks er sjekket. På dette feltet, og vi har satt en forvandle som er avhengig av en faktor –f som er utgangspunktet 1:

.boksen {
/* grunnleggende stiler som mål og bakgrunn */
–f: 1;
forvandle: translate(calc((1 – var(–f))*100vw)) scalex(var(–f));
}

Når boksen er :sjekket, vi endrer verdien av CSS variabel –f .5:

:sjekket ~ .boksen { –f: .5 }

Innstillingen en overgang på .boksen gjør det gå greit fra en tilstand til den andre:

.boksen {
/* samme stiler som før */
overgang: transform .3s letthet-i;
}

Merk at dette ikke egentlig fungerer i den nåværende versjonen av Kanten på grunn av denne feilen.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Imidlertid, CSS graderinger er bakgrunnen bilder, som er bare animatable i Kanten og IE 10+. Så, mens vi kan gjøre ting enklere for oss selv og redusere mengden av generert CSS for overganger (sett inn koden nedenfor), vi er fortsatt ikke gjør fremskritt i form av å utvide støtte.

.blinds {
bakgrunn: linear-gradient(90deg, #f90 var(–pos, 0%), #444 0) 50%/ 5em;
overgang: .3s letthet-i-ut;

:sjekket ~ & { –pos: 100%; }
}

Åpen/lukk blinds på å sjekke/fjerne merket i avmerkingsboksen (live demo, Edge).

Skriv inn Houdini, som gjør det mulig for oss å registrere egendefinerte egenskaper og deretter animere dem. For tiden er dette bare støttes av Blink nettlesere bak Eksperimentelle Web-Platform-funksjoner flagget, men det er fortsatt utvide støtte en bit fra Kanten alene.

Den Eksperimentelle Web-Plattformen har flagget er aktivert i Chrome.

Kommer tilbake til vårt eksempel, vi registrerer –pos tilpasset eiendom:

CSS.registerProperty({
name: ‘–pos’,
syntaks: ‘<lengde-andel>’,
initialValue: ‘0%’
});

Merk at <lengde-andel> betyr det aksepterer ikke bare lengden og prosentandel verdier, men også calc() kombinasjoner av dem. I motsetning <lengde> | <prosent> aksepterer bare lengde og prosentandel verdier, men ikke calc() kombinasjoner av dem.

Imidlertid, å gjøre dette, gjør ikke noen forskjell i Chrome, selv med flagget er aktivert, sannsynligvis fordi, i tilfelle av overganger, hva som blir overført er eiendom som har en verdi som avhenger av CSS variabel og ikke CSS variabel i seg selv. Og siden vi vanligvis ikke kan overgangen mellom to bakgrunnen bilder i Chrome generelt, er dette ikke fungerer så godt.

Det fungerer i Kanten, men det fungerte i Kanten, selv uten å registrere –pos variabel fordi Kanten gir oss mulighet til overgangen mellom graderinger generelt.

Hva fungerer i Blink nettlesere med flagget er aktivert, er det å ha en animasjon i stedet for en overgang.

html {
bakgrunn: linear-gradient(90deg, #f90 var(–pos, 0%), #444 0) 50%/ 5em;
animasjon: persienner .85s letthet-i-ut uendelig alternativ;
}

@keyframes blinds {{ –pos: 100%; } }

Men, dette er nå ikke fungerer i Kanten lenger, fordi, mens Edge kan animere mellom gradient bakgrunn, det kan ikke gjøre det samme for egendefinerte egenskaper.

Så vi trenger å ta en alternativ tilnærming til Kanten her. Dette er hvor @støtter kommer i hendig, siden alt vi trenger å gjøre er å sjekke om en -ms – prefiks eiendom er støttet.

@funksjon grad($pos: 100%) {
@return-linear-gradient(90deg, #f90 $pos, #444 0);
}

html{
/* samme som før */

@støtter (-ms-bruker-velg: ingen) {
background-image: grad(0%);
animasjon-navn: persienner-alt;
}
}

@keyframes persienner-alt {{ background-image: grad() } }

Stop posisjoner er ikke det eneste vi kan animere denne måten. Vi kan gjøre det samme for gradient vinkel. Ideen bak det er ganske mye det samme, bortsett fra at nå er vår animasjon er ikke en vekslende en lenger, og vi bruker en easeInOutBack slags timing funksjon.

@funksjon grad($ang: 1turn) {
@return-linear-gradient($ang, #f90 50%, #444 0);
}

html {
bakgrunn: grad(var(–ang, 0deg));
animasjon: rot 2s kubikk-bezier(.68, -.57, .26, 1.65) uendelig;

@støtter (-ms-bruker-velg: ingen) {
background-image: grad(0turn);
animasjon-navn: rot-alt;
}
}

@keyframes rot {{ –ang: 1turn; } }

@keyframes rot-alt {{ background-image: grad(); } }

Husk at akkurat som i tilfelle av stop posisjoner, kan vi bare animere mellom gradient vinkel uttrykt i samme enhet i Kanten, så å ringe vårt Sass funksjon med grad(0deg) i stedet for grad(0turn) ikke fungerer.

Og, selvfølgelig, CSS variable vi bruker nå aksepterer vinkel verdier i stedet for lengder og prosenter:

CSS.registerProperty({
name: ‘–ang’,
syntaks: ‘<vinkel>’,
initialValue: ‘0deg’
});

Feiende rundt (live demo, Blink nettlesere med flagg og Edge).

På en lignende måte, kan vi også animere radial graderinger. Og de virkelig kule ting om CSS variabel tilnærming er at det tillater oss å animere ulike komponenter av fargeovergangen annerledes, som noe som ikke er mulig når du blir fargeovergangar som hele veien Kanten (noe som er grunnen til følgende demoer ikke fungerer så godt i Kanten).

La oss si at vi har følgende radial-gradient():

$s: 9%;

html {
–x: #{$p};
–y: #{$p};
bakgrunn: radial-gradient(sirkel på var(–x) var(–y), #f90, #444 $p);
}

Vi registrerer –x –og y-variablene:

CSS.registerProperty({
name: ‘–x’,
syntaks: ‘<lengde-andel>’,
initialValue: ‘0%’
});

CSS.registerProperty({
name: ‘–y’,
syntaks: ‘<lengde-andel>’,
initialValue: ‘0%’
});

Deretter legger vi på de animasjoner:

html {
/* samme som før */
animasjon: 0s letthet-i-ut -2.3 s alternative uendelig;
animasjon-navn: x, y;
animasjon-varighet: 4.1 s, 2.9 s;
}

@keyframes x {{ –x: #{100% – $p} } }
@keyframes y {{ –y: #{100% – $p} } }

Resultatet vi får kan sees nedenfor:

Flytting av lys (live demo, Blink nettlesere med flagg).

Vi kan bruke denne teknikken til å animere de forskjellige egendefinerte egenskaper vi bruker inne gradient-funksjonen for å gjøre de blinde i vårt første eksempel nær den andre veien i stedet for å gå tilbake. For å gjøre dette, introduserer vi to mer CSS variabler, –c0 og c1–:

$c: #f90 #444;

html {
–c0: #{nth($c, 1)};
–c1: #{nth($c, 2)};
bakgrunn: linear-gradient(90deg, var(–c0) var(–pos, 0%), var(–c1) 0) 50%/ 5em;
}

Vi registrerer alle disse egendefinerte egenskaper:

CSS.registerProperty({
name: ‘–pos’,
syntaks: ‘<lengde-andel>’,
initialValue: ‘0%’
});

CSS.registerProperty({
name: ‘–c0’,
syntaks: ‘<farge>’,
initialValue: ‘rød’
});

/* samme for-c1 */

Vi bruker de samme animasjon som før for plassering av første stopp –pos, og i tillegg til dette, vil vi introdusere to trinn() animasjoner for de to andre variablene, bytte sine verdier hver gang en gjentakelse av den første animasjonen (det å endre verdien av –pos) er fullført:

$t: 1s;

html {
/* samme som før */
animasjon: 0s uendelig;
animasjon-navn: c0, pos, c1;
animasjon-varighet: 2*$t, $t;
animasjon-timing-funksjon: trinn(1), enkel-i-ut;
}

@keyframes pos {{ –pos: 100%; } }

@keyframes c0 { 50% { –c0: #{nth($c, 2)} } }
@keyframes c1 { 50% { –c1: #{nth($c, 1)} } }

Og vi får følgende resultat:

En annen versjon av blindene animasjon (live demo, Blink nettlesere med flagg).

Vi kan også bruke dette på en radial-gradient() (ingenting, men bakgrunnen erklæring endringer):

bakgrunn: radial-gradient(circle, var(–c0) var(–pos, 0%), var(–c1) 0);

Økende plater (live demo, Blink nettlesere med flagg).

Nøyaktig samme taktikk som fungerer for ikpsoniske-gradient() i tillegg:

bakgrunn: ikpsoniske-gradient(var(–c0) var(–pos, 0%), var(–c1) 0);

Økende skiver (live demo, Blink nettlesere med flagg).

Gjenta graderinger er også et alternativ for å lage en krusning-lignende effekt i radial saken:

$p: 2em;

html {
/* samme som før */
bakgrunn: gjenta-radial-gradient(sirkel,
var(–c0) 0 var(–pos, 0px), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Bølger (live demo, Blink nettlesere med flagg).

Og en helix/stråler effekt i ikpsoniske saken:

$s: 5%;

html {
/* samme som før */
bakgrunn: gjenta-ikpsoniske-gradient(
var(–c0) 0 var(–pos, 0%), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Økende stråler (live demo, Blink nettlesere med flagg).

Vi kan også legge til en annen CSS-variabel for å gjøre ting mer interessant:

$n: 20;

html {
/* samme som før */
bakgrunn: radial-gradient(sirkel på var(–o, 50% 50%),
var(–c0) var(–pos, 0%), var(–c1) 0);
animasjon: 0s uendelig;
animasjon-navn: c0, o, pos, c1;
animasjon-varighet: 2*$t, $n*$t, $t;
animasjon-timing-funksjon: trinn(1), trinn(1), enkel-i-ut;
}

@keyframes o {
@for $jeg fra 0 til $n {
#{$i*100%/$n} { –o: #{random(100)*1%} #{random(100)*1%} }
}
}

Vi trenger å registrere deg for denne variabelen for det hele til å fungere:

CSS.registerProperty({
name: ‘–o’,
syntaks: ‘<lengde-andel>+’,
initialValue: ‘50%’
});

Og det er det! Resultatet kan sees nedenfor:

Tilfeldig plassert voksende plater (live demo, Blink nettlesere med flagg).

Jeg vil si fremtiden for å endre graderinger med keyframe animasjoner ganske kult. Men i mellomtiden, for kryss-nettleser løsninger, JavaScript måte er fortsatt den eneste gyldige.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!