Jak používat přechody CSS3

Každý miluje pohyb. Přidání čtvrtého rozměru (času) do návrhu webu je hlavní způsob, jakým vyniká design na obrazovce z návrhu tisku. CSS Transitions jsou jednoduchá metoda pro animaci vlastností prvku, která umožňuje obohatit určité události ve vašem webovém designu bez nutnosti použití Flash nebo JavaScript.

W3C vhodně popisuje přechody na svých webových stránkách, neboť "CSS Transitions umožňuje, aby změny vlastností v hodnotách CSS proběhly hladce po zadanou dobu". Jinými slovy, přechody CSS nám umožňují postupně měnit majetek, vytvářet pocit pohybu a přemýšlet návrhy s jemností a emocí, které není možné s rychlou změnou.

Podpora prohlížeče

Všechny moderní prohlížeče (ano i IE!) Nyní podporují přechody CSS. Důležité je však, že pokud přechod v podporovaném prohlížeči není podporován, přechod bude ignorován a změny vlastností budou aplikovány okamžitě. Tato ladná degradace je základním kamenem osvědčených postupů.

Abychom rozšířili rozsah podpory prohlížeče, můžeme použít předpony prodejců, což rozšiřuje funkci Firefox 4-15, Opera 10.5-12 a většinu verzí prohlížeče Chrome a Safari. Kód, včetně alternativ předpony dodavatele, vypadá takto:

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

Vlastnost bez předpony je přidána v dolní části zásobníku, aby bylo zajištěno, že konečná implementace bude trumfovat všechny ostatní, protože se vlastnost přesune z návrhu na dokončený stav.

Parametry přechodu

Existují čtyři parametry pro přechody CSS:

• přechodová vlastnost: vlastnost, kterou chcete doplnit, nebo klíčové slovo "vše", které se použije pro všechny vlastnosti;
• doba přechodu: doba přechodu;
• funkce přechodu - časování: uvolnění, které má být použito, vytváří přirozeněji vypadající pohyb
• trans-delay: určuje zpoždění počátku přechodu.

Kromě toho můžete také použít vlastnost zkrácené vazby (jako v příkladu výše), kde parametry jsou zadány jako vlastnost, trvání, funkce časování, zpoždění.

Vlastnosti, které lze převést

Můžete přechod pouze na vlastnosti, které lze přeložit do matematické hodnoty. Takže například můžete převést velikost písma; nemůžete přejít na font-face.

Úplný seznam vlastností, které lze nyní převést, je následující:

poloha na pozadí, okrajová barva dolní, okrajová šířka dolní, okrajová levostranná, okrajová levostranná, okrajová pravá barva, okrajová pravá šířka, okrajová mezera, okrajová barva, border-top-width, spodní, klip, barva, velikost písma, velikost písma, výška, levá, mezera mezi písmeny, šířka, min-výška, min-šířka, neprůhlednost, obrysová barva, šířka obrysu, polstrování dole, polstrování doleva, polstrování pravá, zarovnání, šířka, rozestup slov, z-index.

Použití přechodů

Přechodové prohlášení jsou připojeny k normálnímu stavu prvku. Proto je prohlášena pouze jednou pro několik států, jako je: focus,: active and pseudo classes.

Pomocí následujícího kódu můžeme nastavit základní menu a text odstavce. Je navržen tak, aby položky menu změnily barvu pozadí a barvu pozadí při převrácení a tak, aby vložený odkaz změnil svou podtrženou barvu z bílé na zelenou při přejíždění nad:

Business
  Kód 
  Design 
  Inspirace 
  Smíšený 
  mobilní, pohybliví 
  Zprávy 
  Zdroje 
  Použitelnost 
  Integer posuere er a ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id id id id nibh ultricies vehicle id id elit.  Celé číslo zašlete ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Zde je náhled:

Používáte přechody CSS3? Jaké efekty jste vytvořili? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, pohyblivý obraz přes Shutterstock.