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:
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-function
urč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 konceease-in
- určuje přechodový efekt s pomalým startemease-out
- určuje přechodový efekt s pomalým koncemease-in-out
- určuje přechodový efekt s pomalým začátkem a koncemcubic-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-delay
urč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;
}
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 |