Přechody CSS

Obsah

Zobrazit obsah

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á tuto vlastnost plně podporuje.

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>. <div> element také specifikoval 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

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

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

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 na šířku a 4 sekundy na výšku:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

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

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Určete rychlostní křivku přechodu

Vlastnost transition-timing-function určuje rychlostní křivku efektu přechodu.

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 své vlastní hodnoty ve funkci kubický-bezier

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;}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#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;}

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

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

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

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

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

Příklad

div {
  
transition-delay: 1s;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

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

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Přechod + Transformace

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

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

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

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

nebo pomocí zkrácené vlastnosti přechod:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

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

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Vlastnosti přechodu CSS

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

transition: Zkrácená vlastnost pro nastavení čtyř vlastností přechodu do jediné vlastnosti
transition-delay: Určuje zpoždění (v sekundách) pro přechodový efekt
transition-duration: Určuje, kolik sekund nebo milisekund trvá dokončení přechodového efektu
transition-property: Určuje název vlastnosti CSS, pro kterou je přechodový efekt určen
transition-timing-function: Určuje rychlostní křivku přechodového efektu