Sådan bruges CSS3-overgange

Alle elsker bevægelse. Tilføjelse af den fjerde dimension (tid) til et webstedsdesign er den vigtigste måde, at skærmbaseret design skiller sig ud fra printdesign. CSS Overgange er en simpel metode til at animere egenskaber af et element, der gør det muligt at berige visse begivenheder i dit webdesign uden behov for Flash eller JavaScript.

W3C beskriver passende overgange på deres hjemmeside som "CSS Transitions tillader ejendomsændringer i CSS-værdier at forekomme glat over en bestemt varighed". Med andre ord giver CSS-overgange os mulighed for at ændre en egenskab inkrementalt, hvilket skaber en bevægelsefølelse og imbuber design med subtilitet og følelser, der ikke er muligt med en hurtig ændring.

Browser support

Alle moderne browsere (ja endda IE!) Understøtter nu CSS-overgange. Men vigtigere, hvis overgange ikke understøttes i den browser, der bruges, ignoreres overgangen, og ejendomsændringerne vil blive anvendt straks. Denne yndefulde nedbrydning er en hjørnesten i bedste praksis.

For at udvide rækkevidden af ​​browser support kan vi bruge sælgerpræfikser, dette udvider funktionen til at omfatte Firefox 4-15, Opera 10.5-12 og de fleste versioner af Chrome og Safari. Koden, herunder sælgerpræfiks alternativer, ser sådan ud:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Den ikke-præfikserede ejendom tilføjes nederst i stakken for at sikre, at den endelige implementering vil trompe alle de andre, da ejendommen flytter fra udkast til færdig status.

Overgangsparametre

Der er fire parametre til CSS-overgange:

• overgangsejendom: ejendommen der skal tweened, eller søgeordet 'alle' skal gælde for alle ejendomme;
• overgangsperiode: overgangsperioden
• Overgangs-timing-funktion: den lette at blive anvendt, dette skaber mere naturlig udseende bevægelse
• transtion-forsinkelse: angiver en forsinkelse til starten af ​​overgangen.

Derudover kan du også bruge shorthandegenskaben (som i eksemplet ovenfor), hvor parametrene er angivet som egenskab, varighed, timingfunktion, forsinkelse.

Egenskaber der kan overføres

Du kan kun overføre egenskaber, der kan oversættes til en matematisk værdi. Så for eksempel kan du overføre skriftstørrelse; Du kan ikke overføre skrifttype-ansigt.

Den fulde liste over ejendomme, der i øjeblikket kan overføres, er som følger:

Baggrundsstilling, grænsebund-farve, grænsebundsbredde, grænse-venstre-farve, kantlinie-venstre bredde, kant-højre-farve, kant-højre bredde, kantafstand, kantlinjefarve, bredde, bredde, bund, klip, farve, skriftstørrelse, skrifttype-vægt, højde, venstre, bogstavafstand, margen-bund, margen-venstre, margen-højre, margen-top, maksimal højde, bredde, min-højde, min bredde, opacitet, konturfarve, kontur-bredde, polstring-bund, polstring til venstre, polstring til højre, polstringstop, højre, tekstindrykning, tekstskygge, justere, bredde, ord-afstand, z-indeks.

Brug af overgange

Overgangsaangivelser er knyttet til elementets normale tilstand. Derfor erklæres kun en gang for flere stater som: fokus,: aktiv og pseudoklasser.

Ved hjælp af følgende kode kan vi oprette en grundmenu og et stykke tekst. Det er stylet, så menupunkterne ændrer deres farve og baggrundsfarve, når de rulles over, og således at inline-linket ændrer sin understregerfarve fra hvid til grøn, når den hoveres over:

Business
  Kode 
  Design 
  Inspiration 
  Diverse 
  Mobil 
  Nyheder 
  Ressourcer 
  Anvendelighed 
  Helt helhed er der en ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Helt helhed er der en god venlig hilsen.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Sådan ser det ud:

Bruger du CSS3 Overgange? Hvilke effekter har du været i stand til at skabe? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, bevægelsesbillede via Shutterstock.