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

HTML a CSS Manuál Ostatní vlastnosti 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

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Avatar
Samik11
Redaktor
Avatar
Samik11:

Tak tohle je paráda :-)

Odpovědět 9.4.2013 22:27
„Radost vidět a rozumět, to je nejkrásnější dar přírody.“ Albert Einstein
Avatar
j.martenek
Člen
Avatar
j.martenek:

Dá se nějak udělat, aby při najetí myši na element č. 1 se nějak změnil element č. 2?

 
Odpovědět 11.8.2013 19:49
Avatar
Odpovídá na j.martenek
Michal Žůrek (misaz):

dá a máš hned 2 možnosti.
1.) druhý element musí být vnořený do prvního

<div id="e1">
    <div id="e2">

2.) javascriptem

Odpovědět  +1 11.8.2013 19:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
j.martenek
Člen
Avatar
j.martenek:

Pro mě bude lepší ta první možnost. Javascript ještě moc neovládám.

 
Odpovědět 17.8.2013 18:31
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na j.martenek
Honza Bittner:

nauč se jQuery, je to jednodušší :)

Odpovědět  -1 17.8.2013 18:44
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jan Swiatkowski:

Tak tohle je paráda!! :-D (hledal jsem to celý týden :-) )

Odpovědět 6. března 14:07
V jednoduchosti je krása
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.