CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Přechody CSS


Přechody CSS

Přechody CSS umožňují plynule měnit hodnoty vlastností po danou dobu.

Přejetím myší na prvek níže zobrazíte efekt přechodu CSS:

CSS

V této kapitole se dozvíte o následujících vlastnostech:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Podpora prohlížeče pro přechody

Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.

Property
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Jak používat přechody CSS?

Chcete-li vytvořit přechodový efekt, musíte zadat dvě věci:

  • vlastnost CSS, ke které chcete přidat efekt
  • trvání účinku

Poznámka: Pokud není zadána část trvání, nebude mít přechod žádný účinek, protože výchozí hodnota je 0.

Následující příklad ukazuje 100px * 100px červený prvek <div>. Prvek <div> také určil přechodový efekt pro vlastnost width s trváním 2 sekund:

Příklad

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Efekt přechodu se spustí, když zadaná vlastnost CSS (šířka) změní hodnotu.

Nyní zadáme novou hodnotu pro vlastnost width, když uživatel najede myší na prvek <div>:

Příklad

div:hover {
  width: 300px;
}

Všimněte si, že když kurzor myši opustí prvek, postupně se změní zpět na svůj původní styl.


Změňte několik hodnot vlastností

Následující příklad přidává přechodový efekt pro vlastnost width i height s dobou trvání 2 sekundy pro šířku a 4 sekundy pro výšku:

Příklad

div {
  transition: width 2s, height 4s;
}


Určete rychlostní křivku přechodu

Vlastnost transition-timing-functionurčuje rychlostní křivku přechodového efektu.

Vlastnost transition-timing-function může mít následující hodnoty:

  • ease - určuje přechodový efekt s pomalým začátkem, pak rychlým a pomalým koncem (toto je výchozí)
  • linear - určuje přechodový efekt se stejnou rychlostí od začátku do konce
  • ease-in - určuje přechodový efekt s pomalým startem
  • ease-out - určuje přechodový efekt s pomalým koncem
  • ease-in-out - určuje přechodový efekt s pomalým začátkem a koncem
  • cubic-bezier(n,n,n,n) - umožňuje definovat vlastní hodnoty v kubické-bezierově funkci

Následující příklad ukazuje některé z různých rychlostních křivek, které lze použít:

Příklad

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Zpoždění přechodového efektu

Vlastnost transition-delayurčuje zpoždění (v sekundách) pro efekt přechodu.

Následující příklad má před spuštěním zpoždění 1 sekundy:

Příklad

div {
  transition-delay: 1s;
}

Přechod + Transformace

Následující příklad přidává k transformaci přechodový efekt:

Příklad

div {
  transition: width 2s, height 2s, transform 2s;
}

Další příklady přechodu

Vlastnosti přechodu CSS lze zadat jednu po druhé, takto:

Příklad

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

nebo pomocí zkrácené vlastnosti transition:

Příklad

div {
  transition: width 2s linear 1s;
}

Otestujte se pomocí cvičení

Cvičení:

Přidejte 2sekundový přechodový efekt pro změny šířky prvku <div>.

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  : ;
}

div:hover {
  width: 300px;
}
</style>

<body>
  <div>This is a div</div>
</body>


Vlastnosti přechodu CSS

V následující tabulce jsou uvedeny všechny vlastnosti přechodu CSS:

Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect