IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Transitions (přechody) - Český CSS3 manuál

Za pomocí CSS3 můžete snadno obohatit změnu elementu bez potřeby Flashe či JavaScriptu.

Použití je snadné: zadáme, které vlastnosti má být efekt přiřazen a zvolíme mu dobu průběhu. Pozn: Výchozí hodnota délky efektu je nulová, pokud ji tedy nezadáme efekt se neprojeví.

Například:

div
{
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
}

Nyní jsme určili, že změna šířky divu bude probvázena plynule po dobu 2 sekund. Nejčastěji se nám to hodí při najetí na daný element. Přidáme tedy změnu šířky:

div:hover
{
    width:300px;
}
 

Pokud chcete změn více, jednoduše je oddělte čárkou :)

div
{
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}
Jsem čtvereček co má rád myšku uvnitř :P

Nastavit si dále můžeme dobu čekání na start efektu a způsob výpočtu rychlosti efektu (ze začátku pomalejší a ke konci rychlejší nebo naopak, či normální po celou dobu).

Příkladné nastavení:

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

A to samé nastavené v jednom řádku:

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

Možnosti pro transition-timing-function

  • linear -> stejná rychlost od začátku až ke konci (cubic-bezier(0,0,1,1))
  • ease -> pomalejší start, ve prostřed zrychlení a ke konci dojede opět pomaleji (cubic-bezier(0.25, 0.1, 0.25, 1))
  • ease-in -> pomalejší start (cubic-bezier(0.42,0,1,1))
  • ease-out -> pomalejší konec (cubic-bezier(0,0,0.58,1))
  • ease-in-out - pomalejší start a konec (cubic-bezier(0.42,0,0­.58,1))
  • cubic-bezier(n,n,n,n) - umožňuje navolit si vlastní rychlost efektu hodnota n je od 0 do 1

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Aktivity